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