Vicuna Style Test

• このセクションを読み飛ばし、カスタマイズを見る

このページは、jQuery UI Accordionを動作確認するために作成したテストページです(Validなソースではありません)

以前、インデックス系ページでjQuery Accordionにて紹介したVicunaテンプレート向けのカスタマイズを、jQuery UI Accordionを使ったものに変更したページです。

jQuery UI Accordionについての情報は以下をご参照ください

• jQuery UI - Demos & Documentation （英語）

JavaScriptが有効になっているとき、サイドバーのタイトルに「マウスのクリック」で、内容が開閉されます。

テンプレートとスキンについては、3ping.org - Vicunaのスキンをローカルで編集・調整する方法 より、wu様提供のスタイルテスト用ファイルを利用させていただきました。（多謝）

• Vicuna-CMS
• 3ping.org

Continue reading

jQuery UI（http://jqueryui.com/home）から「ui.accordion.js」「ui.core.js」とjQuery本体を入手しておきます。 入手済みでしたら、特にダウンロードの必要はありません。このページでは、jQuery UI 1.7.2を利用しています。

head要素で、以下のようにjQuery UI、jQuery本体を呼び出ししておきます。

<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./js/ui/ui.core.js"></script>
<script type="text/javascript" src="./js/ui/ui.accordion.js"></script>

dl class="navi" のところにid="accordion"を指定しておきます。

特にdt要素にa要素を指定しなくても、$("#accordion").accordion();で動作します。

$(function(){
		$("#accordion").accordion();
});

細かなオプションは、「Accordionのデモページ(jqueryui.com)」を参照してください。本ページでは、{active: 2}を指定して、ナビゲーションの3番目のエレメントを初期状態で開いているようにしています。

今現在でわかっている問題として、オプションでanimated: 'bounceslide'を指定すると正常に動作しないようです。Internet Explorer向けに微調整が必要かもしれません。

編集： 07.15. 2009 　22：10

関連記事

• VicunaテンプレートでJQueryAccordion