タブパネル(サイドタブ)を設定する

書式

tabpanelObj = new Spry.Widget.TabbedPanels(tabpaneID)

tabpanelObj : タブパネルオブジェクト
tabpaneID : タブパネル全体を囲むdivタグのID

説明

タブパネル(サイドタブ)を設定するにはSpry.Widget.TabbedPanels()を使います。パラメータにはタブパネル全体を囲んでいるdivタグのID名を指定します。また、タブパネルのためのスタイルシートファイル(SpryTabbedPanels.css)を読み込む必要があります。タブパネルが正常に構築されると、作成されたタブパネルオブジェクトが返されます。タブパネル(サイドタブ)処理を行うためには、HTMLの構造とスタイルシートが以下のように定義されている必要があります。通常のものと異なるのは最初のdivタグのclass名のみです。通常版ではTabbedPanels、サイドタブの場合hVTabbedPanelsになります。

<div class="VTabbedPanels" 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>

逆引きAdobe Spryリファレンス

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="SpryTabbedPanels.css" type="text/css" media="all">
<script src="SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript"><!--
window.onload = function() {
new Spry.Widget.TabbedPanels("tabPanel1");
}
// --></script>
</head>
<body>
<h1>Adobe Spry : タブパネル サンプル</h1>
<div class="VTabbedPanels" id="tabPanel1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">特集記事</li>
<li class="TabbedPanelsTab" tabindex="0">統計データ</li>
<li class="TabbedPanelsTab" tabindex="0">連載記事</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">まだ検討中です...</div>
<div class="TabbedPanelsContent">ただいま集計中です...</div>
<div class="TabbedPanelsContent">白いワニになってます</div>
</div>
</div>
</body>
</html>