Ajaxを使おう
掲載日： 2007年 12月 19日
jQuery UI タブ
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の場合のレイアウトに影響が 出ますので、このようにスクリプトで対応した方が良いかもしれません。
次ページで、いくつかのサンプルを試してみます。
