jQueryのUIのAPI - タブ部材（タブウィジェット）
カテゴリ
使用法
説明：マルチパネル単一のコンテンツエリア、リストのタイトル内の各パネル。
新バージョン：1.0
タブ（タブ）は、通常、アコーディオン（アコーディオン）のように、同一のスペースを節約するために、複数のセクションにコンテンツが使用されます。
タブ（タブ）が正しく、タブを動作させるために使用しなければならないタグの特定のセットを持っています。
- タブ（タブ）は、順序（なければなりません
<ol>または順不同（<ul>リスト - 各ページの「タイトル」タグは（リスト項目でなければなりません
<li>内部）、および一緒に使用する必要がありますhrefアンカー（の属性<a>）パッケージ。 - 各タグプレートは、任意の有効なページ要素にすることができますが、IDを対応するタブに関連付けられたID、アンカーハッシュを持っている必要があります。
各プレートタブページの内容は、ページ内に定義することができます良いです、またはAjaxを介してロードされてもよいです。 どちらの方法は、アンカータグの関連ページに基づいているhref自動プロセス。 デフォルトでは、ときにアクティブにするタブをクリックし、しかしによってeventのオプションを変更したり、イベントを上書きすることができます。
ここではいくつかのサンプルタグは以下のとおりです。
<DIVのID = "タブ">
<UL>
<李> <a href="#fragment-1"> A </a>にます。</ li>
<李> <a href="#fragment-2"> 2 </a>にます。</ li>
<李> <a href="#fragment-3"> 3 </a>にます。</ li>
</ UL>
<DIVのID = "フラグメント-1">
Loremのイプサムの悲しみはconsectetuerのadipiscingのELIT、sedはDIAMのnonummy NIBHのeuismodのtincidunt utのlaoreet doloreマグナaliquam ERATのvolutpat、AMET座ります。
</ DIV>
<DIVのID = "フラグメント-2">
Loremのイプサムの悲しみはconsectetuerのadipiscingのELIT、sedはDIAMのnonummy NIBHのeuismodのtincidunt utのlaoreet doloreマグナaliquam ERATのvolutpat、AMET座ります。
</ DIV>
<DIVのID = "フラグメント-3">
Loremのイプサムの悲しみはconsectetuerのadipiscingのELIT、sedはDIAMのnonummy NIBHのeuismodのtincidunt utのlaoreet doloreマグナaliquam ERATのvolutpat、AMET座ります。
</ DIV>
</ DIV>
キーボード操作
フォーカスがタブにある場合は、次のキーボードコマンドが使用可能になります。
- UP / LEFT：前のタブにカーソルを移動します。 最初のページ上のラベル場合は、最後のタブにフォーカスを移動します。 フォーカスされたタブの活性化後の短い遅延で。
- DOWN / RIGHT：次のタブにカーソルを移動します。 最後のページ上のラベル場合は、最初のタブにフォーカスを移動します。 フォーカスされたタブの活性化後の短い遅延で。
- HOME：最初のタブにカーソルを移動します。 フォーカスされたタブの活性化後の短い遅延で。
- END：最後のタブにカーソルを移動します。 フォーカスされたタブの活性化後の短い遅延で。
- SPACE：フォーカスされたタブのパネルに関連付けられた活性化。
- ENTER：フォーカスされたタブのパネルに関連付けられたアクティブ化またはスイッチ。
- ALT + PAGE UP：前のタブと直ちに有効にカーソルを移動します。
- ALT + PAGE DOWN：次のタブにカーソルを移動し、すぐに活性化しました。
フォーカスがパネル上にある場合、次のキーボードコマンドが使用可能になります。
- CTRL + UP：関連するタブにカーソルを移動します。
- ALT + PAGE UP：前のタブと直ちに有効にカーソルを移動します。
- ALT + PAGE DOWN：次のタブにカーソルを移動し、すぐに活性化しました。
テーマ
タブ部材（タブウィジェット）を使用してjQueryのUI CSSフレームワークを 、そのスタイルのルックアンドフィールを定義します。 あなたが指定したスタイルタブを使用する必要がある場合は、以下のCSSクラス名を使用することができます。
-
ui-tabs：外容器タブ。 あなたが設定するとcollapsible-timeオプションを、付加的な要素を備えているui-tabs-collapsible、クラス。-
ui-tabs-navタブリスト：。- ナビゲーションリスト項目をで活性化され
ui-tabs-activeクラス。 Ajaxの呼び出しを介してロードされたコンテンツは、項目のリストが表示されますui-tabs-loading、クラス。-
ui-tabs-anchor：アンカーのための配電盤。
-
- ナビゲーションリスト項目をで活性化され
-
ui-tabs-panel：タブ関連のパネル。 唯一の対応するタブがアクティブにする場合にのみ表示されます。
-
頼ります
- UIコア（UIコア）
- コンポーネントライブラリ（ウィジェットファクトリー）
- エフェクトコア（コアエフェクト） （オプション;
showとhideオプションで使用されます）
追加情報
- 一部は、いくつかの機能のCSSを必要とし、それ以外の場合は動作しません。 カスタムテーマを作成する場合は、出発点として、ウィジェット指定されたCSSファイルを使用します。
例
シンプルなjQueryのUIのタブ（タブ）。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>タブ部材（タブウィジェット）デモ</タイトル>
<リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<SCRIPT SRC = "// code.jquery.com/jquery-1.10.2.js"> </スクリプト>
<SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
</ HEAD>
<ボディ>
<DIVのID = "タブ">
<UL>
<李> <a href="#fragment-1">の<span> A </ SPAN> </a>の</李>
<李> <a href="#fragment-2">の<span> 2 </ span>にする</a>ます。</ li>
<李> <a href="#fragment-3">の<span> 3 </ span>にする</a>ます。</ li>
</ UL>
<DIVのID = "フラグメント-1">
<P>最初のタグがデフォルトで有効になっています：</ p>
<コード> $（ "#tabs」）.tabs（）; </ code>の
</ DIV>
<DIVのID = "フラグメント-2">
Loremのイプサムの悲しみはconsectetuerのadipiscingのELIT、sedはDIAMのnonummy NIBHのeuismodのtincidunt utのlaoreet doloreマグナaliquam ERATのvolutpat、AMET座ります。
Loremのイプサムの悲しみはconsectetuerのadipiscingのELIT、sedはDIAMのnonummy NIBHのeuismodのtincidunt utのlaoreet doloreマグナaliquam ERATのvolutpat、AMET座ります。
</ DIV>
<DIVのID = "フラグメント-3">
Loremのイプサムの悲しみはconsectetuerのadipiscingのELIT、sedはDIAMのnonummy NIBHのeuismodのtincidunt utのlaoreet doloreマグナaliquam ERATのvolutpat、AMET座ります。
Loremのイプサムの悲しみはconsectetuerのadipiscingのELIT、sedはDIAMのnonummy NIBHのeuismodのtincidunt utのlaoreet doloreマグナaliquam ERATのvolutpat、AMET座ります。
Loremのイプサムの悲しみはconsectetuerのadipiscingのELIT、sedはDIAMのnonummy NIBHのeuismodのtincidunt utのlaoreet doloreマグナaliquam ERATのvolutpat、AMET座ります。
</ DIV>
</ DIV>
<スクリプト>
$（ "#tabs」）.tabs（）;
</スクリプト>
</ BODY>
</ HTML>