【Adobe Spry TIPS 】タブパネル
タブパネルはタブでコンテンツを切り替えるためのUIになります。
1月1日にリニューアルされるYahoo!JapanやLivedoorでも利用されている比較的メジャーな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 });
})