Spry:SpryTabbedPanels*サイトをコンパクト化する

Adobeで配布されている、AjaxライブラリーSpry。
手軽に使えるライブラリーですので、ご紹介いたします。
このサイトでもこのライブラリーを使い、サイトをコンパクトにする事が出来ました。
是非お試しください(o*｡_｡)oﾍﾟｺｯ

1.

PluginのDownload

こちらのサイトから、「Download and Discuss」の「Get prerelease 1.4 of Spry framework now」をクリックし、必要事項を記入し、「continue」ボタンを押す。
すると、ダウンロードできる画面になり、「Download for Macintosh and Windows (ZIP, 3.13 MB)」をクリックし、Spry_P1_4_12-14.zipをダウンロードする。

2.

解凍し、必要なファイルを抜き取る。

このタブパネルで必要なファイルは、以下の通り。

Spry_P1_4_12-14/widgets/tabbedpanelsの中に入っている
SpryTabbedPanels.cssとSpryTabbedPanels.jsの2つのファイル。
※CSSファイルに関しては、必要な箇所だけ抜き取って、自分のCSSファイルに保存してもよい。

3.

<head></head>間の編集

ここでは、WordPressに限らず、様々なサイトで使用できるように説明しますので、それぞれの環境に合わせて編集してください。

まず、htmlファイルの<head></head>間に、SpryTabbedPanels.cssとSpryTabbedPanels.jsをリンクする。

<script src=”lib/SpryTabbedPanels.js” type=”text/javascript”></script>
<link rel=”stylesheet” href=”lib/SpryTabbedPanels.css” type=”text/css” />

※jsファイルは基本的にいじらないので、libというフォルダを作って入れました。
自分のファイルと区別するためにも、プログラムｊｓファイルを別フォルダに入れるほうがよいです。

そして、スクリプトを実行するタグを書きます。

<script language=”JavaScript” type=”text/javascript”>
window.onload= function(){
new Spry.Widget.TabbedPanels(”tp1″);
}
</script>

(”tp1″)の中のtp1は編集可能です。
ただし、変えた場合、以降に出てくるtp1も自分が変えたものに直してください。

4.

<body></body>間の編集

構造は以下のようになります。
３で指定した、tp1をid指定しています。（3で変えた方はここを変えてください。）
必ず、タブの数とコンテンツの数を合わせるようにします。
また、タブの箇所は、イメージ画像を入れても動作します。
CSSでデザインをしたい人は、SpryTabbedPanels.cssをみて編集するとよいと思います。

<div class=”TabbedPanels” id=”tp1″>
<ul class=”TabbedPanelsTabGroup”>
<li class=”TabbedPanelsTab” tabindex=”0″>タブ 1</li>
<li class=”TabbedPanelsTab” tabindex=”0″>タブ 2</li>
<li class=”TabbedPanelsTab” tabindex=”0″>タブ 3</li>
<li class=”TabbedPanelsTab” tabindex=”0″>タブ 4</li>
</ul>
<div class=”TabbedPanelsContentGroup”>
<div class=”TabbedPanelsContent”>
<p>タブ1をクリックした結果</p>
</div>
<div class=”TabbedPanelsContent”>
<p>タブ2をクリックした結果</p>
</div>
<div class=”TabbedPanelsContent”>
<p>タブ3をクリックした結果</p>
</div>
<div class=”TabbedPanelsContent”>
<p>タブ4をクリックした結果</p>
</div>
</div>
</div>