お仕事でdivタグに対する効果を追加する必要があったので、Adobe Spryを使ってみました。というか、そう提案してみたのですけどね。(汗)
まずは取り掛かりと言うことで、簡単そうな「折りたたみパネル」のテストをしてみました。
ちなみに今回利用しているSpryのバージョンは1.6です。

まずは必要なライブラリを読み込みます。

<script src=”[Path to Spry]/widgets/collapsiblepanel/SpryCollapsiblePanel.js” type=”text/javascript”></script>
<script src=”[Path to Spry]/includes/SpryDOMUtils.js” type=”text/javascript”></script>

今回の効果だけであれば「SpryDOMUtils.js」は読み込む必要は無いのですが、今回はブログの記事と連動させる予定ですので、そのための布石として一緒にテストです。

折りたたみの出来るパネル部分は、Spryのサンプルコードにならって次のようにしました。

<div class=”CollapsiblePanel” id=”cp1″>
<div class=”CollapsiblePanelTab”>
Panel 1
</div>
<div class=”CollapsiblePanelContent”>
Content for Panel 1 goes here.
</div>
</div>

<div class=”CollapsiblePanel” id=”cp2″>
<div class=”CollapsiblePanelTab”>
Panel 2
</div>
<div class=”CollapsiblePanelContent”>
Content for Panel 2 goes here.
</div>
</div>

「CollapsiblePanelTab」クラスを指定しているdivタグの中がパネルのタイトルとなり、クリックするたびに「CollapsiblePanelContent」クラスを指定しているdivタグが表示されたり消えたりするようになります。
次にSpryを使ったJavascriptコードですが、例えばID「cp1」のパネルだけ動作するように考えると次のようになります。

<script type=”text/javascript”>
var cp1Obj = new Spry.Widget.CollapsiblePanel(”cp1″, {contentIsOpen:false, enableAnimation:false});
</script>

「cp1Obj」は適当な名称でかまいません。「Spry.Widget.CollapsiblePanel」の第1引数に効果を加えたいdivタグのIDを指定します。第2引数は効果の内容です。この場合は、初期状態ではパネルを閉じておき、開閉動作でのアニメーション(スムーズに開いたり閉じたりする)を無効にしています。

以上のスクリプトを、ページが読み込まれた後に実行すればよいだけです。HTMLソースの最後にこのソースを挿入するか、onLoadイベントで実行するなどすればよいでしょう。

単 純に考えれば、効果を与えたいdivタグの数だけ、上記のスクリプトをふやしていけばよいのですが、今回やりたいのはブログ記事の一覧リストで記事タイト ルをクリックすると記事の内容が表示されるような効果を与えるつもりです。とすると、このやり方ではちょっと不都合があります。

もちろん、記事の数をブログのテンプレートタグなどで取得してJavascriptに埋め込むという力技でも解決できますが、ここはもう少しスマートなやり方を考えて見ます。そこで「SpryDOMUtils.js」の出番です。まずはコード。

<script type=”text/javascript”>
function InitFunc() {
Spry.$$(”.CollapsiblePanel”).forEach(function(n) { window[n.id] = new Spry.Widget.CollapsiblePanel(n, {contentIsOpen:false, enableAnimation:false}); });
}

Spry.Utils.addLoadListener(InitFunc);
</script>

「Spry.$$～」の行が前のスクリプトに変わる部分になります。「Spry.$$()」はDOMを簡単に使えるAPIでHTML内で指定しているIDやクラスを引数にします。今回の場合、HTMLコードを見てもらうと分かると思いますが、折りたたみパネルには全てクラス「CollapsiblePanel」を指定していますので、これを使います。

「forEach()」は「Spry.$$()」で見つけたDOMの数だけ引数に指定した関数を実行します。

最後に、以上の内容を「function」でユーザ関数にしておいて、「Spry.Utils.addLoadListener()」を使ってページのロード後に実行されるようにしてみました。

参考リンク

関連記事