タブ付きのパネル Widget の概要と構造
タブ付きのパネル Widget は、わずかなスペースにコンテンツを格納できるパネルのセットです。 ユーザーがアクセスしたいパネルのタブをクリックすると、タブ付きのパネルに格納されたコンテンツの表示/非表示が切り替わります。 ユーザーが別のタブをクリックすると、それに従って Widget のパネルが開きます。 タブ付きのパネル Widget では、一度に 1 つのコンテンツパネルのみが開きます。 次にタブ付きのパネル Widget の例を示します。この例では、3 番目のパネルが開いています。
- A.
- タブ
- B.
- コンテンツ
- C.
- タブ付きのパネル Widget
- D.
- タブ付きのパネル
タブ付きのパネル Widget の HTML コードは、すべてのパネルが含まれる外側の div タグ、タブのリスト、コンテンツパネルが含まれる div タグ、および各コンテンツパネルの div タグで構成されます。 タブ付きのパネル Widget の HTML コードには、ドキュメントのヘッド内とタブ付きのパネル Widget の HTML コードの後の script タグも含まれます。
ドキュメントのヘッド内の script タグは、タブ付きのパネル Widget に関連するすべての JavaScript 関数を定義します。 タブ付きのパネル Widget のコードの後の script タグは、タブ付きのパネルをインタラクティブにする JavaScript オブジェクトを作成します。 タブ付きのパネル Widget の HTML コードを次に示します。
<head>
. . .
<!--Link the CSS style sheet that styles the tabbed panel-->
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<!--Link the Spry TabbedPanels JavaScript library-->
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
</head>
<body>
<!--Create the Tabbed Panel widget and assign classes to each element-->
<div class="TabbedPanels" id="TabbedPanels1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab">Tab 1</li>
<li class="TabbedPanelsTab">Tab 2</li>
<li class="TabbedPanelsTab">Tab 3</li>
<li class="TabbedPanelsTab">Tab 4</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Tab 1 Content</div>
<div class="TabbedPanelsContent">Tab 2 Content</div>
<div class="TabbedPanelsContent">Tab 3 Content</div>
<div class="TabbedPanelsContent">Tab 4 Content</div>
</div>
</div>
<!--Initialize the Tabbed Panel widget object-->
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
このコードでは、new JavaScript 演算子によって、タブ付きのパネル Widget オブジェクトが初期化され、div コンテンツが TabbedPanels1 の ID を使用して静的 HTML コードからインタラクティブなページエレメントに変換されます。 Spry.Widget.TabbedPanels メソッドはタブ付きのパネルオブジェクトを作成する Spry フレームワークのコンストラクタです。このオブジェクトを初期化するために必要な情報は、ドキュメントのヘッド内でリンクした SpryTabbedPanels.js JavaScript ライブラリに格納されています。
タブ付きのパネル Widget の各エレメントには、CSS クラスが格納されています。 これらのクラスはタブ付きのパネル Widget のスタイルを制御し、対応する "SpryTabbedPanels.css" ファイルに存在します。
タブ付きのパネル Widget の特定の部分の外観を変更するには、HTML コードでその部分に割り当てられたクラス名に対応する CSS ルールを編集します。 たとえば、タブ付きのパネルのタブの背景色を変更するには、"SpryTabbedPanels.css" ファイルの TabbedPanelsTab ルールを編集します。 "SpryTabbedPanels.css" ファイルの CSS コードを変更すると、そのファイルにリンクされているすべてのタブ付きのパネルが影響を受けます。
HTML コードに示されているクラスに加えて、タブ付きのパネル Widget には、Widget に関連付けられた特定のデフォルトのビヘイビアもあります。 このビヘイビアは Spry フレームワークの組み込み部分で、"SpryTabbedPanels.js" JavaScript ライブラリファイルに格納されています。 タブ付きのパネルライブラリには、マウスオーバー、パネルを開くためのタブのクリック、パネルのフォーカス、およびキーボードによる操作に関連するビヘイビアが格納されています。
タブ付きのパネルの外観を変更してこのビヘイビアに関連付けるには、"SpryTabbedPanels.css" ファイルの適切なクラスを編集します。 特定のビヘイビアを削除する場合は、そのビヘイビアに対応する CSS ルールを削除できます。
タブ付きのパネル Widget 構造に使用されるさまざまなタグ
上の例では、div タグおよびリストアイテムによって Widget のネストされたタグ構造が作成されます。
Container <div> Tabs <ul> Tab <li> Content container <div> Content <div>
タブ付きのパネル Widget が正常に機能するためには、この3 レベルの 5 つのコンテナ構造が不可欠です。ただし、この構造は、使用する実際のタグより重要です。 Spry で構造 (div タグとは限りません) が読み取られ、それに従って Widget が作成されます。 3 レベルの 5 つのコンテナ構造が適切に配置されていれば、ブロックレベルのエレメントを使用して Widget を作成できます。
Container <div> Tabs <div> Tab <h3> Content container <div> Content <p>
この例の div タグは柔軟で、他のブロックレベルのエレメントを格納できます。 ただし、p タグまたはその他のインラインタグには他のブロックレベルのエレメントを格納できないため、このタグを、タブ付きのパネルのコンテナまたはパネルタグとして使用することはできません。