【応用編】ナビゲーションNo1

WEBサイトにはページ全体の内容がわかるよう
グローバルナビゲーションが設置されます。
mouseover()/mouseout()時に色、文字、デザインを切り替えて
クリック可能であることや見た目の印象付ける方法として広く普及しました。
いくつかサンプルコードとともに実装してみましょう。

【jQuery】
<script type=”text/javascript”>
$(function(){
 //織田信長のロールオーバーイメージ
 $(“img[src=’images/oda.jpg’]”).mouseover(function(){
  $(this).attr(“src”,”images/oda_on.jpg”);
 }).mouseout(function(){
  $(this).attr(“src”,”images/oda.jpg”);
 });
 //柴田勝家のロールオーバーイメージ
 $(“img[src=’images/shibata.jpg’]”).mouseover(function(){
  $(this).attr(“src”,”images/shibata_on.jpg”);
 }).mouseout(function(){
  $(this).attr(“src”,”images/shibata.jpg”);
 });
 //前田利家のロールオーバーイメージ
 $(“img[src=’images/maeda.jpg’]”).mouseover(function(){
  $(this).attr(“src”,”images/maeda_on.jpg”);
 }).mouseout(function(){
  $(this).attr(“src”,”images/maeda.jpg”);
 });
 //明智光秀のロールオーバーイメージ
 $(“img[src=’images/akechi.jpg’]”).mouseover(function(){
  $(this).attr(“src”,”images/akechi_on.jpg”);
 }).mouseout(function(){
  $(this).attr(“src”,”images/akechi.jpg”);
 });
});
</script>

【HTML】
<ul>
     <li><a href=”#”><img src=”images/oda.jpg” alt=”織田信長”
  width=”109″ height=”36″ /></a></li><!–
  –><li><a href=”#”><img src=”images/shibata.jpg” alt=”柴田勝家”
  width=”102″ height=”36″ /></a></li><!–
  –><li><a href=”#”><img src=”images/maeda.jpg” alt=”前田利家”
  width=”100″ height=”36″ /></a></li><!–
  –><li><a href=”#”><img src=”images/akechi.jpg” alt=”明智光秀”
  width=”97″ height=”36″ /></a></li>
</ul>

ナビゲーションサンプル

Posted in: 応用例 by admin No Comments

【応用編】メールフォーム

jQueryはjavascriptなので、ユーザーの端末上で実行される
プログラムであることが特徴です。
そのため、入力された値のチェックはユーザー端末で行い、
メール送信やデータベースへの登録はサーバー上で行うように、
役割を分けるのが効果的です。
メールフォームを設置するうえで代表となる以下のチェックを
jQueryで実装してみましょう。

  1. 入力必須項目チェック
  2. 数値入力チェック
  3. 簡単なメールアドレスチェック
  4. メールアドレス確認用との値一致チェック
  5. その他選択時の自由記入欄入力必須チェック

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“form”).submit(function(){
 //エラー表示の初期化
 $(“p.error”).remove();
 $(“dl dd”).removeClass(“error”);
  
 $(“:text,textarea”).filter(“.validate”).each(function(){
 //必須項目のチェック
  $(this).filter(“.required”).each(function(){
   if($(this).val()==””){
    $(this).parent().prepend(“<p class=’error’>必須項目です</p>”);
   }
  });
 //数値のチェック
  $(this).filter(“.number”).each(function(){
   if(isNaN($(this).val())){
    $(this).parent().prepend(“<p class=’error’>
     数値のみ入力可能です</p>”);
   }
  });
 //メールアドレスのチェック
  $(this).filter(“.mail”).each(function(){
   if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){
    $(this).parent().prepend(“<p class=’error’>メールアドレスの形式が異なります</p>”);
   }
  });
 //メールアドレス確認のチェック
  $(this).filter(“.mail_check”).each(function(){
    if($(this).val() && $(this).val()!=$(“input[name=”+$(this).attr(“name”)
    .replace(/^(.+)_check$/, “$1″)+”]”).val()){
    $(this).parent().prepend(“<p class=’error’>メールアドレスと内容が異なります</p>”);
   }
  });
 });
  
 //ラジオボタンのチェック
  $(“:radio”).filter(“.validate”).each(function(){
   $(this).filter(“.required”).each(function(){
    if($(“input[name=”+$(this).attr(“name”)+”]:checked”).size() == 0){
     $(this).parent().prepend(“<p class=’error’>選択してください</p>”);
    }
   });
  });
  
 //チェックボックスのチェック
  $(“.checkboxRequired”).each(function(){
   if($(“:checkbox:checked”,this).size() == 0){
    $(this).prepend(“<p class=’error’>選択してください</p>”);
   }
  });
  
 //その他項目のチェック
  $(“.validate.add_text”).filter(“.validate”).each(function(){
   if($(this).attr(“checked”) == true && $(“input[name=”+$(this).attr(“name”)
    .replace(/^(.+)$/,”$1_text”)+”]”).val()==””){
    $(this).parent().prepend(“<p class=’error’>その他の項目を入力してください</p>”);
   }
  });
  
 //エラーの場合の処理
  if($(“p.error”).size() > 0){
   $(‘html,body’).animate({ scrollTop: $(“p.error:first”)
    .offset().top-40},’slow’);
   $(“p.error”).parent().addClass(“error”);
   return false;
  }
 });
});
</script>

【HTML】
<h1>お問合せ</h1>
<form action=”complate.html” method=”post”>

<dl>
<dt>お名前<span>※</span></dt>
<dd>
<input name=”name” type=”text” size=”40″ class=”validate required” /></dd>

<dt>フリガナ</dt>
<dd><input name=”furi” type=”text” size=”40″ /></dd>

<dt>郵便番号</dt>
<dd><input name=”zip1″ type=”text” size=”3″ maxlength=”3″
class=”validate number”  /> – <input name=”zip2″ type=”text” size=”4″ maxlength=”4″ class=”validate number”  />
</dd>

<dt>メールアドレス</dt>
<dd><input name=”mail” type=”text” size=”80″ 
class=”validate mail”  /></dd>

<dt>メールアドレス(確認)</dt>
<dd><input name=”mail_check” type=”text” size=”80″ 
class=”validate mail_check”  /></dd>

<dt>性別<span>※</span></dt>
<dd>
<input type=”radio” value=”男性” name=”gender” id=”man” 
class=”validate required”  /><label for=”man”>男性</label>
<input type=”radio” value=”女性” name=”gender” id=”woman” /><label for=”woman”>女性</label>

</dd>

<dt>どこでこのサイトを知りましたか?<span>※</span></dt>
<dd class=”checkboxRequired” >
<input name=”serch” type=”checkbox” id=”serch” value=”検索エンジン” />
<label for=”serch”>検索エンジン</label>
<input name=”friend” type=”checkbox” id=”friend” value=”知人の紹介” />
<label for=”friend”>知人の紹介</label>
<input name=”mail_magazine” type=”checkbox”
id=”mail_magazine” value=”メールマガジン” /><label for=”mail_magazine”>メールマガジン</label>
<input name=”etc” type=”checkbox” id=”etc” value=”その他” 
class=”validate add_text”  /><label for=”etc”>その他</label>
<input name=”etc_text” type=”text” value=”” />

</dd>

<dt>お問合せ内容<span>※</span></dt>
<dd><textarea id=”inquiry” name=”inquiry” cols=”60″ rows=”10″ 
class=”validate required”  ></textarea>
</dd>

</dl>
<input type=”submit” value=”送信” />
</form>

メールフォームサンプル

【応用編】ドロップダウンリストNo2

ドロップダウンリストNo1では一階層しかありませんでしたが、
多階層にも対応できるようにしましょう。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“ul.menu li”).hover(function(){
  $(“>ul:not(:animated)”,this).slideDown(“fast”);
 },
 function(){
  $(“>ul”,this).slideUp(“fast”);
 }); 
});
</script>

【HTML】
<ul class=”menu”>
<li><a href=”#”>数学</a>
    <ul class=”sub”>
        <li><a href=”#”>解析学</a>
            <ul class=”sub”>
                <li><a href=”#”>常微分方程式</a></li>
                <li><a href=”#”>偏微分方程式</a></li>
                <li><a href=”#”>積分方程式</a></li>
                <li><a href=”#”>差分方程式と関数方程式</a></li>
                <li><a href=”#”>フーリエ解析</a></li>
                <li><a href=”#”>複素多変数関数と解析空間</a></li>
            </ul>
        </li>
        <li><a href=”#”>幾何学</a>
            <ul class=”sub”>
                <li><a href=”#”>微分幾何学</a></li>
                <li><a href=”#”>一般位相空間論</a></li>
                <li><a href=”#”>代数的位相幾何学</a></li>
                <li><a href=”#”>多様体と胞複体</a></li>
            </ul>
        </li>
        <li><a href=”#”>代数学</a>
            <ul class=”sub”>
                <li><a href=”#”>数論</a></li>
                <li><a href=”#”>体論と多項式</a></li>
                <li><a href=”#”>可換環と可換代数</a></li>
                <li><a href=”#”>代数幾何学</a></li>
                <li><a href=”#”>群論とその一般化</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><a href=”#”>物理学</a>
    <ul class=”sub”>
        <li><a href=”#”>力学</a>
            <ul class=”sub”>
                <li><a href=”#”>古典力学</a></li>
                <li><a href=”#”>解析力学</a></li>
                <li><a href=”#”>量子力学</a></li>
                <li><a href=”#”>相対性理論</a></li>
            </ul>
        </li>
    </ul>
</li>
</ul>

ドロップダウンリストサンプル

【応用編】ドロップダウンリストNo1

ナビゲーションによく使われている方法に
ドロップダウンリストがあります。
WEBサイトがカテゴリー毎に階層化されている場合、
トップページから直接目的のページへ導くことが出来ます。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“ul.sub”).hide(); 
  $(“ul.menu li”).hover(function(){
   $(“ul:not(:animated)”,this).slideDown(“fast”);
  },
  function(){
   $(“ul”,this).slideUp(“fast”);
  }); 
});
</script>

【HTML】
<ul class=”menu”>
<li><a href=”#”>織田家</a>
    <ul class=”sub”>
        <li><a href=”#”>織田信長</a></li>
        <li><a href=”#”>柴田勝家</a></li>
        <li><a href=”#”>佐久間信盛</a></li>
        <li><a href=”#”>丹羽長秀</a></li>
        <li><a href=”#”>森可成</a></li>
        <li><a href=”#”>滝川一益</a></li>
    </ul>
</li>
<li><a href=”#”>武田家</a>
    <ul class=”sub”>
        <li><a href=”#”>武田信玄</a></li>
        <li><a href=”#”>真田信綱</a></li>
        <li><a href=”#”>板垣信方</a></li>
        <li><a href=”#”>原虎胤</a></li>
        <li><a href=”#”>山県昌景</a></li>
        <li><a href=”#”>高坂昌信</a></li>
    </ul>
</li>
<li><a href=”#”>上杉家</a>
    <ul class=”sub”>
        <li><a href=”#”>上杉謙信</a></li>
        <li><a href=”#”>上杉景勝</a></li>
        <li><a href=”#”>直江景綱</a></li>
        <li><a href=”#”>柿崎晴家</a></li>
        <li><a href=”#”>北条高定</a></li>
        <li><a href=”#”>新発田重家</a></li>
    </ul>
</li>
<li><a href=”#”>毛利家</a>
    <ul class=”sub”>
        <li><a href=”#”>毛利元就</a></li>
        <li><a href=”#”>毛利隆元</a></li>
        <li><a href=”#”>吉川元春</a></li>
        <li><a href=”#”>小早川隆景</a></li>
        <li><a href=”#”>志道元良</a></li>
        <li><a href=”#”>福原貞俊</a></li>
        <li><a href=”#”>口羽通良</a></li>
    </ul>
</li>
</ul>

ドロップダウンリストサンプル

【応用編】ページング

検索エンジンの検索結果ページのように、
一度に表示しきれない場合にページを分ける方法があり、
ページングと呼ばれています。
タブパネルと同じように、表示させるコンテンツは別ファイルを
Ajaxで読み込む方法で作りましょう。

【jQuery】
<script type=”text/javascript”>
$(function(){
 //初期のページを読み込み
 $(“#content”).load($(“ul.pager li a:first”).attr(“href”)+” #content”);
 $(“ul.pager li a:first”).addClass(“selected”);

 $(“ul.pager li a”).click(function(){
  $(“#content”).html(‘<p><img src=”images/loading.gif” /></p>’);
  $(“#content”).data(“file”,$(this).attr(“href”));
   //アニメーションでページを切り替え
  $(“html,body”).animate({ scrollTop: $(“h1″).offset().top
   -20},’slow’,’swing’,function(){
   $(“#content”).load($(“#content”).data(“file”)+” #content”);
  });
  
 $(“ul.pager li a”).removeClass(“selected”);
 $(this).addClass(“selected”);
 $(“h1″).text($(this).attr(“title”));
 return false;
 });
});
</script>

【HTML】
<h1>織田家臣団</h1>
<div id=”content”>
  <p class=”loading”><img src=”images/loading.gif” /></p>
</div>

<u class=”pager”l>
    <li><a href=”oda.html” title=”織田家臣団”>1</a></li>
    <li><a href=”takeda.html” title=”武田家臣団”>2</a></li>
    <li><a href=”uesugi.html” title=”上杉家臣団”>3</a></li>
</ul>

ページングサンプル