【Adobe Spry TIPS】 コラプシブルパネル

コラプシブルパネルとはタブをクリックすることにより開閉するパネルUIになります。(これが複数集まったものがアコーディオン)

コラプシブルパネルを利用するにはまずwidgetsからSpryCollapsiblePanel.jsを読み込みます。

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

<script type="text/javascript" src="./widgets/collapsiblepanel/SpryCollapsiblePanel.js"></script>
<script type="text/javascript" src="./includes/SpryDOMUtils.js"></script>

コラプシブルパネルの実行には以下のようなコードを利用します。

Spry.Utils.addLoadListener(function(){
var sampleAccordion = new Spry.Widget.CollapsiblePanel("コラプシブルパネルにするボックスのID");
})

XHTMLは以下のように記述します。

<div id="コラプシブルパネルにするボックスのID" class="CollapsiblePanel">
	<div class="CollapsiblePanelTab">表示するタブ</div>
	<div class="CollapsiblePanelContent">
		<p>表示するコンテンツ</p>
	</div>
</div>

サンプル

少しのルールが変わるだけで設置方法はアコーディオンとさほど変わりません。

最初は閉じた状態で/アニメーションのOFF

実行時に{contentIsOpen:false}を付加することで最初は閉じた状態で,{enableAnimation:false}を付加することによりアニメーションをOFFで実行することができます。

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

サンプル

リンクで開閉

リンクで開閉も非常に簡単です。

Spry.Utils.addLoadListener(function(){
CollapsiblePanel = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
})
<a href="#" onclick="CollapsiblePanel.open();">空ける</a>
<a href="#" onclick="CollapsiblePanel.close();">閉める</a>

サンプル

【Adobe Spry TIPS】 目次

スポンサードリンク

«【Adobe Spry TIPS】 HTMLを取得表示する | メイン | Movable Typeで1日の00:00にエントリーを書いてはいけない»