jQuery UI の Tabs プラグインで、タブ型メニューを簡単に作る方法。
実装例（サンプル）
メニュー 1 の内容。
この実装例の、jQuery UI の CSS テーマは、デフォルトのテーマを読み込んで使っている。もちろん他の CSS テーマにも対応しているので、色々試してみるといい。
メニュー 2 の内容。
メニュー 3 の内容。
実装例の動作について
「メニュー 1」「メニュー 2」「メニュー 3」のタブメニューをクリックすると、クリックしたタブメニューの内容を開く。
実装例のソースコード
読み込み
読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。
まとめて読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script>
個別に読み込む場合
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.tabs.js"></script>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.tabs.js"></script>
JavaScript
<script type="text/javascript">
<!--
$( function() {
$( '#tabs' ) . tabs();
});
// -->
</script>
<!--
$( function() {
$( '#tabs' ) . tabs();
});
// -->
</script>
HTML
<div id="tabs">
<ul>
<li><a href="#tabs-1">メニュー 1</a></li>
<li><a href="#tabs-2">メニュー 2</a></li>
<li><a href="#tabs-3">メニュー 3</a></li>
</ul>
<div id="tabs-1">
<p>メニュー 1 の内容。</p>
<p>この実装例の、jQuery UI の CSS テーマは、デフォルトのテーマを読み込んで使っている。もちろん他の CSS テーマにも対応しているので、色々試してみるといい。</p>
</div>
<div id="tabs-2">
<p>メニュー 2 の内容。</p>
</div>
<div id="tabs-3">
<p>メニュー 3 の内容。</p>
</div>
</div>
<ul>
<li><a href="#tabs-1">メニュー 1</a></li>
<li><a href="#tabs-2">メニュー 2</a></li>
<li><a href="#tabs-3">メニュー 3</a></li>
</ul>
<div id="tabs-1">
<p>メニュー 1 の内容。</p>
<p>この実装例の、jQuery UI の CSS テーマは、デフォルトのテーマを読み込んで使っている。もちろん他の CSS テーマにも対応しているので、色々試してみるといい。</p>
</div>
<div id="tabs-2">
<p>メニュー 2 の内容。</p>
</div>
<div id="tabs-3">
<p>メニュー 3 の内容。</p>
</div>
</div>
タブのリンク先と、タブの内容の id 名を揃える。
オプション
Tabs プラグインには、オプションが多く存在する。私がよく使うのは、下記のオプション。
- cookie
cookie オプションを使うと、最後に開いたタブメニューがどれだったかをクッキー（cookie）に格納することができる。これにより、ページを再度開いたときに、前回の最後に開いたタブメニューの内容を表示させることができる。
- selected
ページ読み込み時に表示させたいタブの配列のインデックスを指定するオプション。
- collapsible
タブ名クリックで開閉できるようにするオプション。collapsible オプションの値に、true を指定することで、閉じることができるようになる。
- event
event オプションの値に、mouseover を指定すると、タブ名にカーソルを合わせるだけで、タブの内容を開く。
- ajaxOptions
タブの内容を読み込むときに追加したい Ajax 用オプション。
- fx
アニメーションでタブを切り替えるようにするオプション。