Spry:CollapsiblePanel*サイドバーをAjaxでコンパクトに。

サイドバーのカテゴリーをコンパクトにする方法をご紹介します。
これもAdobeから配布されているAjaxライブラリーの一つです。

サイドバーが肥大化している…と困った人にオススメ。

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/collapsiblepanelの中に入っている
SpryCollapsiblePanel.cssとSpryCollapsiblePanel.jsの2つのファイル。
※CSSファイルに関しては、必要な箇所だけ抜き取って、自分のCSSファイルに保存してもよい。

3.

<head></head>間の編集

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

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

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

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

4.

<body></body>間の編集

構造は以下のようになります。

タブの箇所は、イメージ画像を入れても動作します。
CSSでデザインをしたい人は、SpryCollapsiblePanel.cssをみて編集するとよいと思います。

<div class=”CollapsiblePanel” id=”categorymenu1″>
<div class=”CollapsiblePanelTab”>カテゴリー1</div>
<div class=”CollapsiblePanelContent”>
サブカテゴリー1<br />
サブカテゴリー1<br />
サブカテゴリー1<br />
</div>
</div>
<div class=”CollapsiblePanel” id=”categorymenu2″>
<div class=”CollapsiblePanelTab”>カテゴリー2</div>
<div class=”CollapsiblePanelContent”>
サブカテゴリー2<br />
サブカテゴリー2<br />
サブカテゴリー2<br />
</div>
</div>
<div class=”CollapsiblePanel” id=”categorymenu3″>
<div class=”CollapsiblePanelTab”>カテゴリー3</div>
<div class=”CollapsiblePanelContent”>
サブカテゴリー3<br />
サブカテゴリー3<br />
サブカテゴリー3<br />
</div>
</div>
<div class=”CollapsiblePanel” id=”categorymenu4″>
<div class=”CollapsiblePanelTab”>カテゴリー4</div>
<div class=”CollapsiblePanelContent”>
サブカテゴリー4<br />
サブカテゴリー4<br />
サブカテゴリー4<br />
</div>
</div>
<div class=”CollapsiblePanel” id=”categorymenu5″>
<div class=”CollapsiblePanelTab”>カテゴリー5</div>
<div class=”CollapsiblePanelContent”>
サブカテゴリー5<br />
サブカテゴリー5<br />
サブカテゴリー5<br />
</div>
</div>

class=”CollapsiblePanelTab”の中にはイメージにしても大丈夫です。
勿論リンクも入れられます。
class=”CollapsiblePanelContent”の中にも、リストタグ表示可能。
用途は様々です。
そして、上記のタグの後に、以下のスクリプトを入れます。
必ず、スクリプトは後に入れなければ、動作しません。

<script language=”JavaScript” type=”text/javascript”>
var categorymenu1 = new Spry.Widget.CollapsiblePanel(“categorymenu1″);
var categorymenu2 = new Spry.Widget.CollapsiblePanel(“categorymenu2″);
var categorymenu3 = new Spry.Widget.CollapsiblePanel(“categorymenu3″);
var categorymenu4 = new Spry.Widget.CollapsiblePanel(“categorymenu4″);
var categorymenu5 = new Spry.Widget.CollapsiblePanel(“categorymenu5″);
</script>

4.

動作をカスタマイズ

SpryCollapsiblePanel.jsの以下の部分を変えると、動作が変わります。（45行目?）

this.element = this.getElement(element);
this.focusElement = null;
this.hoverClass = “CollapsiblePanelTabHover”;
this.openClass = “CollapsiblePanelOpen”;
this.closedClass = “CollapsiblePanelClosed”;
this.focusedClass = “CollapsiblePanelFocused”;
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.animator = null;
this.hasFocus = false;
this.contentIsOpen = false;⇒trueにするとページにアクセスした時、CollapsiblePanelContentが全て開いた状態。falseは全て閉じた状態になる。

<div class=”CollapsiblePanelTab”>にtabindex=”1″やtabindex=”0″を入れると、アンカーを入れてなくてもマウスオーバーで色が変わるようになっているみたいです。
（この1と0の差がよく分からないのですが(^^;
外は色々試してみてください(o*｡_｡)oﾍﾟｺｯ