(Spry実践)１つのページ内で複数の表示を切り替えるタブメニュー

下準備〜コーディング

Adobe Labsから、Spryフレームワークをダウンロード（要Adobe ID）

（注）本記事でのSpryのバージョンは1.6.1です。

Adobe Labs - Spry framework for Ajax
http://labs.adobe.com/technologies/spry/

ダウンロードしたフォルダの中の、widgets >> tabbledpanel が、タブパネルのライブラリです。

ライブラリ読み込み方法

SpryTabbedPanels.html　を開いてみると、<head>で２つのファイルを読み込んでいるのが分かります。

<link href="SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="SpryTabbedPanels.js"></script>

タブパネルのHTML上の構造は以下のようになっています。カスタマイズする際は、それぞれのタグについたclassを維持した状態で。
タブのタイトルを変更するには、以下の緑色の部分を、タブの中身のコンテンツを変更するには、黄色の部分を編集してください。タブの<li>の数と、タブの中身の<div>の数は、必要に応じて<div class="TabbedPanelsContent">TabContent</div>　を追加すればカンタンに出来ます。

<div class="TabbedPanels" id="tp1">
	<ul class="TabbedPanelsTabGroup">
		<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
		<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
		<li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
		<li class="TabbedPanelsTab" tabindex="0">Tab 4</li>
	</ul>
	<div class="TabbedPanelsContentGroup">
		<div class="TabbedPanelsContent">Tab 1 Content</div>
		<div class="TabbedPanelsContent">Tab 2 Content</div>
		<div class="TabbedPanelsContent">Tab 3 Content</div>
		<div class="TabbedPanelsContent">Tab 4 Content</div>
	</div>
</div>

最後に、HTMLの<body>タグが終了する直前に、「最初に何番目のタブをアクティブにするか」を定義した、以下のJavaScriptを書きこめば、完了です（何番目のタブを表示させるかは、下記コードの黄色い箇所の数字を変更する事で決められます）。

<script language="JavaScript" type="text/javascript">
   var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: 2 });</script>

SpryTabbedPanelsのデフォルト動作を確認

こちらから確認できます

表示例

タブ1
タブ2
タブ3
タブ4
タブ5
タブ6

ここにタブ１の中身を書きます

The standard Lorem Ipsum passage, used since the 1500s

ここにタブ２の中身を書きます

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

ここにタブ３の中身を書きます

Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC

ここにタブ４の中身を書きます

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

ここにタブ５の中身を書きます

ここにタブ６の中身を書きます

, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

カスタマイズ例

１　マウスオーバーでタブを切り替える
SpryTabbedPanels.js　の３０６行目あたりにある以下の表記を見つけましょう。コード内の“click”をmouseoverと書き換える事で、タブのコンテンツをマウスオーバーで切り替える事が出来ます。

Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);

２：デザインを変更する
CSSのスキルが必要になりますが、タブメニューのデザインを変更することも出来ます。
　１　タブのデザインを変更したい時は、SpryTabbedPanels.css　の６７行目あたりの.TabbedPanelsTabセレクタを
　２　コンテンツの入れ物のデザインを変更したい時は　SpryTabbedPanels.css　の129行目あたりの.TabbedPanelsContentGroup セレクタを
編集する事でデザイン変更が出来ます。英語ながらCSS内に解説も書かれていますので、編集の際の参考にしてみて下さい。