タブパネルを作る

jQuery

お次はタブパネルを作るチュートリアル。さぁ、サクサクいこう。

<html>
  <head>
    <style>
#container{
    width:500px;
    margin:50px auto;
}
ul.tab{
    padding:0;
}
ul.tab li{
    list-style-type:none;
    width:100px;
    height:40px;
    float:left;
}
ul.tab li a{
    outline:none;
    /* 下部にも線が入っている画像が指定されている。 */
    background:url("http://editors.ascii.jp/m-kobashigawa/jquery_sample/015/images/tab.jpg");
    display:block;
    color:blue;
    line-height:40px;
    text-align:center;
}
ul.tab li a.selected{
    /* 下部に線が入っていない画像が指定されている。 */
    /* これにより、まるで選択されたタブとそのコンテンツパネルが、*/
    /* 一体となって表示されるように見せている */
    background:url("http://editors.ascii.jp/m-kobashigawa/jquery_sample/015/images/tab_selected.jpg");
    text-decoration:none;
    color:#333;
    cursor:default;
}
ul.panel{
    clear:both;
    border:1px solid #9FB7D4;
    border-top:none;
    padding:0;
}
ul.panel li{
    list-style-type:none;
    padding:10px;
    text-indent:1em;
    color:#333;
}
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
    $(function(){
      //まず、選択されたタブには、selectedクラスが適用されていることを前提としている。
      //で、セレクタを使ってその選択されているタブのURLを抽出する。
      var selectedTabUrl = $("ul.tab li a.selected").attr("href")

      //この抽出したURLにはコンテンツ部分のID「#tab1」とか「#tab2」が、
      //文字列として格納されているので、次の一行の中で使用されている擬似セレクタ、
      //「:not(...)」の引数としてそのまま利用できる感じ。
      //で、「選択されているタグが差し示すコンテンツ以外」のコンテンツを、
      //hideを使って非表示にしている。
      $("ul.panel li:not("+selectedTabUrl+")").hide()

      //以上が初期化処理。以下、イベントの登録処理。

      //aタグがクリックされた時のイベントを登録
      $("ul.tab li a").click(function(){
        //全てのaタグからselectedクラスを削除する。（どれも選択されていない状態にする。）
        $("ul.tab li a").removeClass("selected")
        //今選択されたaタグに、selectedクラスを適用する。
        $(this).addClass("selected")
        //全てのコンテンツを非表示にする。
        $("ul.panel li").hide()
        //選択されたaタグのhref属性、すなわち対応するコンテンツのIDをセレクターで抽出、
        var contentsId = $(this).attr("href")
    　  //抽出したIDをセレクタとして使って該当するコンテンツを表示させる。
        $(contentsId).show()
        return false
      })
    })
    </script>
  </head>
  <body>
    <div id="container">
      <!-- タブ部分をul,liタグで実装 -->
      <ul class="tab">
        <li><a href="#tab1" class="selected">JavaScript</a></li>
        <li><a href="#tab2">CSS</a></li>
        <li><a href="#tab3">HTML</a></li>
        <li><a href="#tab4">jQuery</a></li>
        <li><a href="#tab5">XHTML</a></li>
      </ul>
      <!-- コンテンツ部分をul,liタグで実装 -->
      <ul class="panel">
        <li id="tab1">Lorem ...（中略）... ligula. </li>
        <li id="tab2">Nam...（中略）...ipsum. </li>
        <li id="tab3">Pellentesque ...（中略）... velit. </li>
        <li id="tab4">Vestibulum ...（中略）... magna. </li>
        <li id="tab5">Vestibulum ...（中略）... velit. </li>
      </ul>
    </div>
  </body>
</html>

めぼしい注釈は上記のコード中にコメントとして記入しておいたので参考までに。さて、こいつをベースにアニメーションを付加させてみよう。

<html>
  <head>
    <style>
#container{
    width:500px;
    margin:50px auto;
}
ul.tab{
    padding:0;
}
ul.tab li{
    list-style-type:none;
    width:100px;
    height:40px;
    float:left;
}
ul.tab li a{
    outline:none;
    /* 下部にも線が入っている画像が指定されている。 */
    background:url("http://editors.ascii.jp/m-kobashigawa/jquery_sample/015/images/tab.jpg");
    display:block;
    color:blue;
    line-height:40px;
    text-align:center;
}
ul.tab li a.selected{
    /* 下部に線が入っていない画像が指定されている。 */
    /* これにより、まるで選択されたタブとそのコンテンツパネルが、*/
    /* 一体となって表示されるように見せている */
    background:url("http://editors.ascii.jp/m-kobashigawa/jquery_sample/015/images/tab_selected.jpg");
    text-decoration:none;
    color:#333;
    cursor:default;
}
ul.panel{
    clear:both;
    border:1px solid #9FB7D4;
    border-top:none;
    padding:0;
}
ul.panel li{
    list-style-type:none;
    padding:10px;
    text-indent:1em;
    color:#333;
}
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
    $(function(){
      var selectedTabUrl = $("ul.tab li a.selected").attr("href")
      $("ul.panel li:not(" + selectedTabUrl + ")").hide()
      $("ul.tab li a").click(function(){
        $("ul.tab li a").removeClass("selected")
        $(this).addClass("selected")

        //基本的に、hide→slideUp、show→slideDownに変わっただけ。
        $("ul.panel li").slideUp("fast")
        var contentsId = $(this).attr("href")
        $(contentsId).slideDown("fast")
        return false
      })
    })
    </script>
  </head>
  <body>
    <div id="container">
      <!-- タブ部分をul,liタグで実装 -->
      <ul class="tab">
        <li><a href="#tab1" class="selected">JavaScript</a></li>
        <li><a href="#tab2">CSS</a></li>
        <li><a href="#tab3">HTML</a></li>
        <li><a href="#tab4">jQuery</a></li>
        <li><a href="#tab5">XHTML</a></li>
      </ul>
      <!-- コンテンツ部分をul,liタグで実装 -->
      <ul class="panel">
        <li id="tab1">Lorem ...（中略）... ligula. </li>
        <li id="tab2">Nam...（中略）...ipsum. </li>
        <li id="tab3">Pellentesque ...（中略）... velit. </li>
        <li id="tab4">Vestibulum ...（中略）... magna. </li>
        <li id="tab5">Vestibulum ...（中略）... velit. </li>
      </ul>
    </div>
  </body>
</html>

結構地味なアニメーションだw
もう一つ、コンテンツ内部のデータ（jQuery的に表現するなら、$("ul.panel li").text() で取得できる文字列）を、外部ファイルに出しておきたい場合のコードも記述しておく。


！！注意！！
但し、loadはAjaxの機能を使用する。jsonpを使ってるわけじゃないので、他ドメインのファイルを読み込むことはできない。（やろうとするとクロスサイトスクリプティングになるからね。）そのため、以下のコードを丸写しして実験しても読み込めないのであしからず。
動作させたかったら、実験する環境下（このコードを写経したファイルと同じディレクトリの下）に、Javascript.txt、CSS.txt、HTML.txt、jQuery.txt、XHTML.txtを保存して実験してね。

<html>
  <head>
    <style type="text/css">
#container{
    width:500px;
    margin:50px auto;
}
ul.tab{
    padding:0;
}
ul.tab li{
    list-style-type:none;
    width:100px;
    height:40px;
    float:left;
}
ul.tab li a{
    outline:none;
    background:url("http://editors.ascii.jp/m-kobashigawa/jquery_sample/015/images/tab.jpg");
    display:block;
    color:blue;
    line-height:40px;
    text-align:center;
}
ul.tab li a.selected{
    background:url("http://editors.ascii.jp/m-kobashigawa/jquery_sample/015/images/tab_selected.jpg");
    text-decoration:none;
    color:#333;
    cursor:default;
}
p.pannel{
    clear:both;
    border:1px solid #9FB7D4;
    border-top:none;
    padding:10px;
    text-indent:1em;
    color:#333;
}
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      $(function(){
        $("p.pannel").load($("ul.tab li a.selected").attr("href"))
        $("ul.tab li a").click(function(){
          $("ul.tab li a").removeClass("selected")
          $(this).addClass("selected")
          $("p.pannel").load($(this).attr("href"))
          return false
        })
      })
    </script>
  </head>
  <body>
    <div id="container">
      <ul class="tab">
	<!-- hrefにloadしたいファイル名を指定しておく -->
	<!-- ただし、同一ドメインのファイルのみ。 -->
	<li><a href="JavaScript.txt" class="selected">JavaScript</a></li>
	<li><a href="CSS.txt">CSS</a></li>
	<li><a href="HTML.txt">HTML</a></li>
	<li><a href="jQuery.txt">jQuery</a></li>
	<li><a href="XHTML.txt">XHTML</a></li>
      </ul>
      <!-- ul li要素を削除。ここにloadしたファイルの内容を表示させる -->
      <p class="pannel"><p>
    </div>
  </body>
</html>

以上、タブパネルでした〜。