TABS - jQuery TOOLS

タブのための最小限の設定

このページでは、タブを使用するための最小限の設定方法を紹介します。タブの背景にある理論を知るためは、この例がどのように動作するかを理解することが重要です。これを理解することで、あらゆるむ種類のタブを構築することができるようになります。例を、以下に示します:

1番目のタブ内容。タブ内容を"ペイン"といいます。

2番目のタブ内容

3番目のタブ内容

使用する用語が2つのあります：タブはクリックする要素であり、 ペインはタブに関連付けられたコンテンツのコンテナです。

HTML コード

タブおよびペインには、あらゆるHTML要素を使用することができます。このツールは、どのような特定要素にも依存しません。しかし、できるだけHTMLを簡潔にして、標準を厳守することが重要です。次は、このデモのタブのHTMLレイアウトです。

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

<!-- タブ "ペイン" -->
<div class="panes">
	<div>First tab content. Tab contents are called "panes"</div>
	<div>Second tab content</div>
	<div>Third tab content</div>
</div>

JavaScript コード

JavaScriptの役割は、 "ペインへのタブをバインド"とタブ効果を有効にすることです。ここに、このデモで使用されているコードがあります

// 文書ロードが完了し、scriptの実行が可能になった後で、JavaScriptを実行します
$(function() {
	// div.panes 直下の div のタブとして動作するよう ul.tabs を設定する
	$("ul.tabs").tabs("div.panes > div");
});

最初に、jQueryセレクタによりタブのルート要素を選択しなければなりません。ルート配下の全ての子は、タブとして働きます。次に、タブのコンストラクタへ最初の引数として別のjQueryのセレクタを指定し、使用するペインを選択します。今回は、ルート要素を選択しません - 代わりに、直接すべてのペインを選択します。これは、必ずしもペインへ使用可能な親要素を持たないためです。

この1行のJavaScriptの後は、すべて純粋なCSSコーディングです。

CSS コード

タブを作る場合、CSSコーディングは最も大切な作業です。この例では、次のタブへのスタイルシートを使用します。スタイルシートの働きは、ファイルにコメントしてあります。最初のデモで、見栄えの良いタブを使用したかったため、このスタイルシートは "minimal" ではありません。

ネット上には、何百もの異なるデザインのタブであり、どのタブを使用するかは、あなたに任せられます。タブは、最初からデザインするか、またはネットからデザインを借用することができます。または、テンプレートとして我々のタブを使うことができます。これらのタブは、"CSSスプライト"技術を使用して実装します。ここでは、下の1つの背景画像を使用します。

相互に異る幅のタブを確認できます。個々のタブへ、狭いものから広いものへ、 s、l、xl の異るクラス名をおのおの割り当てることにより、タブの幅を調整することができます。