jQuery UI API - タブウィジェット（Tabs Widget）

カテゴリ

ウィジェット（Widgets）

使用法

説明：複数のパネルを持つ単一のコンテンツ領域で、各パネルはリスト内のタイトルに関連付けられています。

バージョン追加：1.0

タブ（Tabs）は通常、アコーディオン（accordion）と同様に、スペースを節約するためにコンテンツを複数のセクションに分割するために使用されます。

タブ（Tabs）が正常に機能するためには、特定のマークアップセットを使用する必要があります：

  • タブ（Tabs）は、順序付き（<ol>）または順序なし（<ul>）リスト内にある必要があります
  • 各タブの「title」はリスト項目（<li>）の内部にあり、かつhref属性を持つアンカー（<a>）でラップされている必要があります。
  • 各タブパネルは任意の有効な要素にすることができますが、関連するタブのアンカー内のハッシュに対応する id を持たなければなりません。

各タブパネルのコンテンツはページ内で定義するか、Ajax でロードすることができます。これらの2つの方法は、タブに関連するアンカーのhrefに基づいて自動的に処理されます。デフォルトでは、タブはクリック時にアクティブになりますが、eventオプションでイベントを変更または上書きできます。

以下はサンプルマークアップです：

<div id="tabs">
  <ul>
    <li><a href="../index.html">一</a></li>
    <li><a href="../index.html">二</a></li>
    <li><a href="../index.html">三</a></li>
  </ul>
  <div id="fragment-1">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

キーボード操作

フォーカスがタブ上にある場合、次のキーボードコマンドが使用できます：

  • UP/LEFT：フォーカスを前のタブに移動します。最初のタブにある場合は、最後のタブにフォーカスを移動します。短い遅延の後に、フォーカスされたタブをアクティブにします。
  • DOWN/RIGHT：フォーカスを次のタブに移動します。最後のタブにある場合は、最初のタブにフォーカスを移動します。短い遅延の後に、フォーカスされたタブをアクティブにします。
  • HOME：フォーカスを最初のタブに移動します。短い遅延の後に、フォーカスされたタブをアクティブにします。
  • END：フォーカスを最後のタブに移動します。短い遅延の後に、フォーカスされたタブをアクティブにします。
  • SPACE：フォーカスされたタブに関連するパネルをアクティブにします。
  • ENTER：フォーカスされたタブに関連するパネルをアクティブにするか、切り替えます。
  • ALT+PAGE UP：フォーカスを前のタブに移動し、すぐにアクティブにします。
  • ALT+PAGE DOWN：フォーカスを次のタブに移動し、すぐにアクティブにします。

フォーカスがパネル上にある場合、次のキーボードコマンドが使用できます：

  • CTRL+UP：フォーカスを関連するタブに移動します。
  • ALT+PAGE UP：フォーカスを前のタブに移動し、すぐにアクティブにします。
  • ALT+PAGE DOWN：フォーカスを次のタブに移動し、すぐにアクティブにします。

テーマ化

タブウィジェット（Tabs Widget）はjQuery UI CSS フレームワークを使用して、外観と感触のスタイルを定義します。タブ固有のスタイルを使用する必要がある場合は、次の CSS クラス名を使用できます：

  • ui-tabs：タブの外側のコンテナ。設定されている場合collapsibleオプションの場合、この要素には追加でui-tabs-collapsible class。
    • ui-tabs-nav：タブリスト。
      • ナビゲーションでアクティブなリスト項目にはui-tabs-activeclassが付きます。Ajax 呼び出しでコンテンツがロードされるリスト項目にはui-tabs-loading class。
        • ui-tabs-anchor：パネルを切り替えるためのアンカー。
    • ui-tabs-panel：タブに関連するパネル。対応するタブがアクティブな場合にのみ表示されます。

依存関係

補足説明

  • このウィジェットは機能的な CSS を必要とするため、それがなければ動作しません。カスタムテーマを作成する場合は、ウィジェット指定の CSS ファイルを出発点として使用してください。

例

シンプルな jQuery UI タブ（Tabs）。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>标签页部件（Tabs Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="../index.html"><span>一</span></a></li>
    <li><a href="../index.html"><span>二</span></a></li>
    <li><a href="../index.html"><span>三</span></a></li>
  </ul>
  <div id="fragment-1">
    <p>第一个标签是默认激活的：</p>
    <code>$( "#tabs" ).tabs(); </code>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>
 
<script>
$( "#tabs" ).tabs();
</script>
 
</body>
</html>

その他の拡張