【Javascript】jQuery UI タブ

前回は、 jQuery UIのアコーディオンを使ってみましたが、今回はタブです。

タブは、ページをめくらずに小さな画面を切り替えて利用する機能です。jQueryのタブは、 切り替え時のエフェクトやAjaxなファイル読み込みもサポートした便利なツールです。デザインはCSSで指定できます。

• jQuery UI Wiki
• jQuery UI
• Download jquey.js(-min.js)
• UI/Tabs ドキュメント
• UI/Tabs Demo
• Download ui.tabs.js(ui.tab.zip)
• jQueryのダウンロードと設置

タブ

jQueryのタブも他のライブラリと同様に簡単に使うことができます。 さっそく使ってみましょう。

<script src="./jquery.js" type="text/javascript"></script>
<script src="./ui.tabs.js" type="text/javascript"></script>
<link href="./ui.tabs.css" rel="stylesheet" type="text/css">

  <script type="text/javascript">
   $(function() {
       $('#jqtab-example1 > ul').tabs();    
   });
  </script>

  <div id="jqtab-example1">
    <ul>
      <li><a href="#tab-1"><span>タブ-1</span></a></li>
      <li><a href="#tab-2"><span>タブ-2</span></a></li>
      <li><a href="#tab-3"><span>タブ-3</span></a></li>
    </ul>

    <div id="tab-1">
      タブ- 1 のコンテンツ
    </div>

    <div id="tab-2">
     タブ- 2 のコンテンツ
    </div>

    <div id="tab-3">
     タブ- 3 のコンテンツ
    </div>
  </div>

タブを動作させるためには、まず先に、jquery.js(あるいは圧縮版jquery-min.jsなど)と、 ui.tabs.jsをscript要素のsrc属性で読み込んでおきます。また、サンプルのCSSと画像は、 ui.tab.zipで入手できます。 (ダウンロード先は上記リンクをご参照ください)

スクリプトの $(function() { })は、DOMの構築待ちイベント で、ページ読み込み後に動作するように、jQueryスタイルのスクリプトを、この中に書いています。

$('#jqtab-example1 > ul') の'#jqtab-example1 > ul'は、 左辺の「親 parent」要素(#jqtab-example1)内にある 右辺の「子 child」要素(ul)に該当するすべてのエレメントを検索します。

このCSSセレクタによって、 ID名jqtab-example1配下のUL要素が検索され、.tabs()によってタブUIが実行されます。 (jQueryのセレクタについてはAPI/1.2/Selectors参照)

そのUL要素内のAタグがタブの耳部分になります。

そして、HREF属性に書かれたhref="#tab-1"などのアンカー名を、 連動するコンテンツ要素のID名として　< id="tab-1">タブ</div>のように付けていくことで、 タブクリックで開くコンテンツを関連付けします。

あとは、好きなCSSを指定して、好きなデザインに作り変えることも可能です。

追記:CSSリセット
このjQueryタブをAll Aboutのコンテンツ内で使用すると一部CSSの干渉が起こります。 そこで干渉する部分のCSSをリセットするコードを追加しました。 jQueryタブでは、タブ(ul要素)部分へ'.ui-tabs-nav'というクラスが追加されるのですが、 このプラグインのデフォルトではmarginの指定がないので All Aboutのコンテンツ自体のmarginが適用され、タブのレイアウトに影響がでます。

これに対処するために、ここでは、上記ソースに下記のCSS修正を追加で施してみました。

//All about用cssリセット
$('.ui-tabs-nav li','#jqtab-example1')

    .css({margin:'0px',listStyle:'none'});

つまり、id名が'#jqtab-example1'内にあるすべてのクラス'.ui-tabs-nav'の'margin'を'0px'にリセットしています。(2010/01更にlistStyle追加)

これは、他のコンテンツでも同様のことが起こり得ると思いますが、CSSでもスクリプトでも対応可能です。 ただ、CSSで対応すると、スクリプトoffの場合のレイアウトに影響が 出ますので、このようにスクリプトで対応した方が良いかもしれません。

次ページで、いくつかのサンプルを試してみます。