【Adobe Spry TIPS 】タブパネル

タブパネルはタブでコンテンツを切り替えるためのUIになります。

1月1日にリニューアルされるYahoo!JapanLivedoorでも利用されている比較的メジャーなUIですね。

head要素内での設定

タブパネルの生成にはSpryTabbedPanels.jsを利用します。

<script type="text/javascript" src="./includes/SpryDOMUtils.js"></script>
<script type="text/javascript" src="./widgets/tabbedpanels/SpryTabbedPanels.js"></script>

widgetsディレクトリ内のabbedpanels内のSpryTabbedPanels.cssを読み込みます。

<link rel="stylesheet" href="./widgets/tabbedpanels/SpryTabbedPanels.css" type="text/css" media="all" />

script要素内でSpry.Widget.TabbedPanelsを利用してタブ化したいグループを指定します。

<script type="text/javascript">
Spry.Utils.addLoadListener(function(){
new Spry.Widget.TabbedPanels("タブ化するグループのID");
})
</script>

body要素内での設定

タブ化するグループにSpry.Widget.TabbedPanelsで設定したidとTabbedPanelsというclass名を指定します。

<div class="TabbedPanels" id="タブ化するグループのID">
タブ化するグループ
</div>

タブ化するグループのタブには、TabbedPanelsTabGroupというclass名を付けた要素で、TabbedPanelsTabというclass名をつけたタブ化したい要素を包んでタブの設定を行います。tabindex="0"をつける事によりタブをキーボードのタブキーで移動できるようになります。

<div class="TabbedPanels" id="タブ化するグループのID">
	<ul class="TabbedPanelsTabGroup">
		<li class="TabbedPanelsTab" tabindex="0">タブ1</li>
		<li class="TabbedPanelsTab" tabindex="0">タブ2</li>
		<li class="TabbedPanelsTab" tabindex="0">タブ3</li>
	</ul>
</div>

表示内容はTabbedPanelsContentGroupというclass名を付けた要素で、TabbedPanelsContentというclass名をつけた要素を包んで記述します。

TabbedPanelsContent内にはTabbedPanelsTabで設定したタブ順に対応する内容を記述してきます。

<div class="TabbedPanels" id="タブ化するグループのID">
	<ul class="TabbedPanelsTabGroup">
		<li class="TabbedPanelsTab" tabindex="0">タブ1</li>
		<li class="TabbedPanelsTab" tabindex="0">タブ2</li>
		<li class="TabbedPanelsTab" tabindex="0">タブ3</li>
	</ul>
	<div class="TabbedPanelsContentGroup">
		<div class="TabbedPanelsContent">タブ1の内容</div>
		<div class="TabbedPanelsContent">タブ2の内容</div>
		<div class="TabbedPanelsContent">タブ3の内容</div>
	</div>
</div>

サンプル

最初に開いているタブを設定する

Spry.Widget.TabbedPanels実行時に{ defaultTab: 表示したいタブの番号 }と指定することにより最初に開いているタブを設定できます。

Spry.Utils.addLoadListener(function(){
new Spry.Widget.TabbedPanels("tabPanel",{ defaultTab: 3 });
})

サンプル

【Adobe Spry TIPS】 目次

スポンサードリンク

«Googleに挑むYahoo!Japan | メイン | 2007年to-R人気エントリーTOP10»