VicunaテンプレートでJQueryAccordion

折りたたみのコンテンツ表示でAccordionというのがあるんですが、こういうのが需要があるのかどうか不明ですが、とりあえず作ってみました。

コンテンツが閉じたり開いたりするというアレです。ということで、つくってみたのがこちら

インデックス系ページでjQuery Accordion

ワタくシもよくわからずに作っている部分があるので、ソースとかかなりテキトーになってます。

Windows　IE7,Firefoxでしか確認してません。

jQueryプラグインの入手

http://plugins.jquery.com/project/accordion

jquery.accordion_2.zipというファイルをダウンロードします。jQueryも同梱されているようです

フォルダをサーバにアップしる

解凍したら、フォルダをアップします。

そのままのファイル構成でアップしました。例えば、ブログトップと同じディレクトリでしたら、

yourdomain.com 　[blog top]
      |--  js
            |---- jquery-accordion
                       |---- lib
                       |---- jquery.accordion.js

サンプルコードを参考にして埋め込む

プラグインを呼び出すコードは以下のようなものです

<script type="text/javascript" src="./js/jquery-accordion/lib/jquery.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/lib/chili-1.7.pack.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/lib/jquery.easing.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/jquery.accordion.js"></script>

jQuery Accordionのデモページが用意されています。以下のページを参考にして色々カスタマイズします

http://jquery.bassistance.de/accordion/demo/

Vicunaのサイドバーでは、dl dt ddが使われていますので、With options, container is a definition list, header dt, content ddのサンプルを利用させてもらいました。

テンプレートでの修正箇所は、id:utilities以下のdlエレメントにて、折りたたみをおこないたい部分に対して、任意のidを与えます。デモページでは、「#list2」というidが付けられていますが、ここでは、#navigationとしておきました。

あとは、jQuery Accordionのデモページのソースをみたらだいたいわかることとおもいます。（説明放棄ｗ）

カスタマイズですが、event: 'mouseover'のところを、event: 'click'のように書くとオンクリックで開閉したりするみたいでした。

なお、Vicunaテンプレートでの動作確認のため、3ping.orgのwuさま提供の、スタイルテスト用ファイルを利用させていただきました。m(u.u)m

参照：　Vicunaのスキンをローカルで編集・調整する方法