アコーディオン Widget の挿入

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

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

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

アコーディオン Widget の追加先となる Web ページを開き、このページのヘッドタグに次の script タグを挿入してこのページに "SpryAccordion.js" ファイルをリンクします。

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

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

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

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

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

ページ上のアコーディオンの表示位置に次の div タグを挿入して、Web ページにアコーディオンを追加します。

<div id="Accordion1" class="Accordion">
</div>

次のように <div class="AccordionPanel"> タグを <div id="Accordion1"...> タグ内に挿入して、アコーディオンにパネルを追加します。

<div id="Accordion1" class="Accordion">
	<div class="AccordionPanel">
	</div>
	<div class="AccordionPanel">
	</div>
</div>

上のコードでは、アコーディオンに 2 つのパネルが追加されます。追加できるパネル数は無制限です。

パネルにタブを追加するには、次のように div class="AccordionPanelTab" タグを各 div class="AccordionPanel" タグ内に挿入します。

<div class="AccordionPanel">
	<div class="AccordionPanelTab">Panel 1 Title</div>
</div>

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

<div class="AccordionPanel">
	<div class="AccordionPanelTab">Panel 1 Title</div>
	<div class="AccordionPanelContent">Panel 1 Content</div>
</div>

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

Spry アコーディオンオブジェクトを初期化するには、次のスクリプトブロックをアコーディオン Widget に対応する HTML コードの後に挿入します。

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

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

アコーディオンの div タグの ID が、Spry.Widgets.Accordion メソッドで指定した ID パラメータと一致することを確認します。 JavaScript の呼び出しが Widget に対応する HTML コードの後に行われることを確認します。

ページを保存します。

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

<head>
...
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
</head>
<body>
	<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>