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