複数のタブとアコーディオンのインスタンス

jQueryツール1.1.0以降は、1回のコールで、複数のアコーディオン（またはタブ）のインスタンスをインスタンス化することが可能です。 ここでは、最後の3つが2番目のタブインスタンスの下にネストされている、5つの異なるタブを見ることができます。 この全体は、次のように1回のコールで設定されます:

  $("ul.tabs").tabs("> .pane");

HTML コード

どのペインがどのタブに属するかを知る方法は ? 解決策は、同じ親（またはラッパー）要素内の各タブ/ペインの組合せを括ることです。 ここでの設定は、次のとおりです:

<!-- 最初のタブ/ペインの組合せのラッパー要素 -->
<div class="wrap">

	<!-- タブ -->
	<ul class="tabs">
		<li><a href="#">タブ1</a></li>
		<li><a href="#">タブ2</a></li>
		<li><a href="#">タブ3</a></li>
	</ul>

	<!-- タブ "ペイン" -->
	<div class="pane">1番目のタブ内容</div>
	<div class="pane">2番目のタブ内容</div>
	<div class="pane">3番目のタブ内容</div>

</div>

<!-- 2番目のタブ集合ラッパー要素  -->
<div class="wrap">

	<!-- タブ -->
	<ul class="tabs">
		...
	</ul>

	<!-- タブ "ペイン" (ネストしたタブを含む) -->
	<div class="pane">
		[ nested tabs/panes #1 ]
	</div>
	<div class="pane">
		[ nested tabs/panes #2 ]
	</div>
	<div class="pane">
		[ nested tabs/panes #3 ]
	</div>

</div>

ネストされた各タブは、ラップ要素として機能し、特別なラッパーを必要としない独立した div.pane 内に含まれています。

jQueryのセレクタ: > .pane は、ラッパー要素の下にあるペインを検索します。 もし .pane のような単純なセレクタを使用した場合、2番目のタブは、親である div.wrap の下にある、 すべてのペインを選択してしまいます。ネストされたこれらのタブは、 wrap クラスを持つ DIV にも含まれるので、12種類の異なったペインをすべて含むことになります。これが、 > .pane セレクタで ラッパーの下の直接の子だけを選択する理由です。

ネストしたタブや異なったペイン・セレクタを持つネストしたタブのインスタンス化を使用しなければ、 上記の設定のような、セレクタに注意する必要はありません。 タブ ドキュメント で 複数のタブインスタンスについての詳細を読むことができます。

複数のアコーディオン

以下に、1回のコールでインスタンス化される2つの独立したアコーディオンのインスタンスがあります:

  $(".accordion").tabs(".pane", {tabs: 'h2', effect: 'slide'});

HTML コード

アコーディオンのセットアップで、すでにタブとペインは同じ親要素内にあるので、今回は、追加の親要素を心配する必要はありません。 ここでのHTML設定は、以前のアコーディオンの設定と同じですが、複数の要素を扱うことができるように、 ここでは IDの代わりにCSSクラス名を使用します。ここに、上記のアコーディオンの構成があります:

<div class="accordion">

	<h2>1番目のペイン</h2>

	<div class="pane"> ... </div>

	<h2>2番目のペイン</h2>

	<div class="pane"> ... </div>

	<h2>3番目のペイン</h2>

	<div class="pane"> ... </div>

</div>

CSS コード

ここでは、#accordion 要素の代わりに、.accordion クラスによって複数要素のスタイルを設定します。 完全なCSS宣言は、スタンドアロンのページを見てください。

.accordion {

	/* アコーディオン・ルート要素へのいくつかの装飾 */
	background:#333 url(/web/jQuery/jQueryTools/img/gradient/h300.png) 0 0;
	width: 300px;
	border:1px solid #333;

	/* IE6 は PNG24 背景を処理できないので、代りに solid 色を使用する */
	-background:#666;


	/* put them side by side */
	float:left;
	margin:20px 0 20px 30px;
}