【Adobe Spry TIPS】 アコーディオン

Spryにはウィジェットとして様々な機能が提供されています。

そのうちの1つが『アコーディオン』です。

アコーディオンとはクリックで、コンテンツを開いたり閉じたりする特徴的なUIになります。

この機能を使うには、まず、widgetsディレクトリ内のaccordionディレクトリ内のSpryAccordion.jsをhead要素などで読み込みます。

また、addLoadListenerを利用する為、SpryDOMUtils.jsも読み込んでおきます。

<script type="text/javascript" src="./widgets/accordion/SpryAccordion.js"></script>
<script type="text/javascript" src="./includes/SpryDOMUtils.js"></script>

アコーディオンの実行には以下のようなコードを利用します。

Spry.Utils.addLoadListener(function(){
	var sampleAccordion = new Spry.Widget.Accordion("アコーディオンにするボックスのID");
})

XHTMLは以下のようなソースになります。

<div id="アコーディオンにするボックスのID">
	<div class="AccordionPanel">
		<div class="AccordionPanelTab">表示するタブ</div>
		<div class="AccordionPanelContent">
			表示するコンテンツ
		</div>
	</div>
		・
		・
		・
		・
	<div class="AccordionPanel">
		<div class="AccordionPanelTab">表示するタブ</div>
		<div class="AccordionPanelContent">
			表示するコンテンツ
		</div>
	</div>
</div>

アコーディオンのパーツをにAccordionPanelとつけて、タブ部分にAccordionPanelTab、コンテンツ部分にAccordionPanelContentというclass名をつけます。

そしてそれを、アコーディオンにするボックスのIDをつけたボックスで包みます。

これでアコーディオンが動作します。

サンプル

デフォルト開くパネルを変更する


実行時の{ defaultPanel: 開きたいパネルの番号 }を付加することにより、デフォルト開くパネルを変更することができます。

Spry.Utils.addLoadListener(function(){
	var sampleAccordion = new Spry.Widget.Accordion("sampleAccordion",{ defaultPanel: 開きたいパネルの番号 });
})

開きたいパネル番号は最初のパネルを0、次のパネルを1のように数えていきます。
-1 を指定することにより何も開いていない状態を設定できます。

サンプル

開閉スピードを変更する

実行時の{ duration: 開閉スピード(ミリ秒)}を付加することにより、パネルの開閉スピードを変更することができます。

Spry.Utils.addLoadListener(function(){
	var sampleAccordion = new Spry.Widget.Accordion("sampleAccordion",{ duration: 開閉スピード(ミリ秒)});
})

サンプル

アニメーションを消す

実行時の{ enableAnimation: false }を付加することにより、パネルの開閉時のアニメーションを切ることができます。

Spry.Utils.addLoadListener(function(){
	var sampleAccordion = new Spry.Widget.Accordion("sampleAccordion",{ enableAnimation: false });
})

サンプル

パネルの高さを内容量にあわせて変更する

実行時の{ useFixedPanelHeights: false }を付加することにより、パネルの内容量よりパネルの高さが変化するようになります。(デフォルトは最大の内容量を持つパネルの高さ)

Spry.Utils.addLoadListener(function(){
	var sampleAccordion = new Spry.Widget.Accordion("sampleAccordion",{ useFixedPanelHeights: false });
})

サンプル

リンクでアコーディオンを操作する

以下のように記述をするとリンクでアコーディオンを操作することができます。

var sampleAccordion;
Spry.Utils.addLoadListener(function(){
	sampleAccordion = new Spry.Widget.Accordion("sampleAccordion");
})
 <a href="javascript:void(0)" onclick="sampleAccordion.openFirstPanel(); return false;">最初のパネル</a> 
<a href="javascript:void(0)" onclick="sampleAccordion.openPreviousPanel(); return false;">前のパネル</a> 
<a href="javascript:void(0)" onclick="sampleAccordion.openNextPanel(); return false;">次のパネル</a> 
<a href="javascript:void(0)" onclick="sampleAccordion.openLastPanel(); return false;">最後のパネル</a>
<a href="javascript:void(0)" onclick="sampleAccordion.openPanel(0); return false;">1つ目のパネル</a> 
<a href="javascript:void(0)" onclick="sampleAccordion.openPanel(1); return false;">2つ目のパネル</a> 
<a href="javascript:void(0)" onclick="sampleAccordion.openPanel(2); return false;">3つ目のパネル</a> 
<a href="javascript:void(0)" onclick="sampleAccordion.openPanel(3); return false;">4つ目のパネル</a> 
<a href="javascript:void(0)" onclick="sampleAccordion.openPanel('panel1'); return false;">id:panel1のパネル</a> 
<a href="javascript:void(0)" onclick="sampleAccordion.openPanel('panel2'); return false;">id:panel2のパネル</a> 
<a href="javascript:void(0)" onclick="sampleAccordion.openPanel('panel3'); return false;">id:panel3のパネル</a> 
<a href="javascript:void(0)" onclick="sampleAccordion.openPanel('panel4'); return false;">id:panel4のパネル</a> 

それぞれのリンクに対応したパネルを開くことができます。

サンプル

リンクでアコーディオンに色をつける

実行時に { hoverClass: "hover", openClass: "open", closedClass: "closed" }を追加するとhover(マウスオーバー時)、open(オープンしたパネル)、closed(閉じたパネル)をそれぞれCSSで指定できるようになります。

Spry.Utils.addLoadListener(function(){
	var sampleAccordion = new Spry.Widget.Accordion("sampleAccordion", { hoverClass: "hover", openClass: "open", closedClass: "closed" });
})
.hover {
	background-color:#FF0000;
}
.open {
	background:lightgray;
}
.closed {
	background-color:yellow;
}

サンプル

【Adobe Spry TIPS】 目次

スポンサードリンク

«【Adobe Spry TIPS】onloadイベントを追加する。 | メイン | 【Adobe Spry TIPS】 HTMLを取得表示する»