折りたたみパネル Widget の挿入

"SpryCollapsiblePanel.js" ファイルを検索して、Web サイトに追加します。 "SpryCollapsiblePanel.js" ファイルは、Adobe Labs からダウンロードした Spry ディレクトリにある widgets/collapsiblepanel ディレクトリ内で検索できます。詳細については、ファイルの準備を参照してください。

たとえば、Web サイトのルートフォルダ内に "SpryAssets" という名前のフォルダを作成し、このフォルダに "SpryCollapsiblePanel.js" ファイルを移動します。 "SpryCollapsiblePanel.js" ファイルには、折りたたみパネル Widget をインタラクティブにするために必要な情報がすべて含まれています。

"SpryCollapsiblePanel.css" ファイルを検索して、Web サイトに追加します。このファイルの追加先として、メインディレクトリ、または CSS ディレクトリがある場合はそのディレクトリを選択できます。

折りたたみパネル Widget の追加先となる Web ページを開き、このページのヘッドタグに次の script タグを挿入してこのページに "SpryCollapsiblePanel.js" ファイルをリンクします。

<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>

"SpryCollapsiblePanel.js" ファイルへのファイルパスが正しいことを確認します。このパスは、Web サイト内のどこにファイルを配置したかによって異なります。

ページのヘッドタグに次の link タグを挿入して、Web ページに "SpryCollapsiblePanel.css" ファイルをリンクします。

<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />

"SpryCollapsiblePanel.css" ファイルへのファイルパスが正しいことを確認します。このパスは、Web サイト内のどこにファイルを配置したかによって異なります。

折りたたみパネルを Web ページに追加するには、ページ上の折りたたみパネルの表示位置に次の div タグを挿入します。

<div id="CollapsiblePanel1" class="CollapsiblePanel">
</div>

折りたたみパネルにタブを追加するには、次のように div class="CollapsiblePanelTab" タグを div class="CollapsiblePanel" タグ内に挿入します。

<div id="CollapsiblePanel1" class="CollapsiblePanel">
	<div class="CollapsiblePanelTab">Tab</div>
</div>

パネルにコンテンツ領域を追加するには、次のように div class="CollapsiblePanelContent" タグを div class="CollapsiblePanel" タグ内に挿入します。

<div class="AccordionPanel">
	<div class="CollapsiblePanelTab">Tab</div>
	<div class="CollapsiblePanelContent">Content</div>
</div>

CollapsiblePanelContent の開始タグと終了タグの間にコンテンツを挿入します。たとえば、前の例では Content です。コンテンツには、HTML フォームエレメントなどの有効な HTML コードを指定できます。

Spry の折りたたみパネルオブジェクトを初期化するには、折りたたみパネル Widget に対応する HTML コードの後に次のスクリプトブロックを挿入します。

<div id="CollapsiblePanel1" class="CollapsiblePanel">
. . .
</div>
<script type="text/javascript">
	var acc1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>

new JavaScript 演算子によって、折りたたみパネル Widget オブジェクトが初期化され、div コンテンツが CollapsiblePanel1 の ID を使用して静的 HTML コードからインタラクティブな折りたたみパネルオブジェクトに変換されます。 Spry.Widget.CollapsiblePanel メソッドは、折りたたみパネルオブジェクトを作成する Spry フレームワークのコンストラクタです。このオブジェクトを初期化するために必要な情報は、この手順の開始時にリンクした SpryCollapsiblePanel.js JavaScript ライブラリに含まれています。

折りたたみパネルの div タグの ID が、Spry.Widgets.CollapsiblePanel メソッドで指定した ID パラメータと一致することを確認します。 JavaScript の呼び出しが Widget に対応する HTML コードの後に行われることを確認します。

ページを保存します。

コード全体を次に示します。

<head>
...
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
</head>
<body>
	<div id="CollapsiblePanel1" class="CollapsiblePanel">
		<div class="CollapsiblePanelTab">Tab</div>
		<div class="CollapsiblePanelContent">Content</div>
	</div>
<script type="text/javascript">
	var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>
</body>