[jQueryプラグイン] アコーディオンメニュー jquery.ith.accordion.js
更新:
WEBページにアコーディオンメニューを生成したり操作するためのjQueryプラグインを作成しましたので公開します。
使い方
jQueryの本体ファイルと、jquery.ith.accordion.js、jquery.ith.accordion.cssの3つのファイルを読み込みます。
HTML
<script src="(ディレクトリ)/jquery.js"></script>
<script src="(ディレクトリ)/jquery.ith.accordion.js"></script>
<link rel="stylesheet" href="(ディレクトリ)/jquery.ith.accordion.css">
プログラムからメニューを開く/閉じる
JavaScriptからメニュー開閉の操作を行うことができます。jQueryオブジェクトのithAccordion()メソッドの第1引数に、開く場合は'open'を、閉じる場合は'close'を指定します。第2引数には、開く(閉じる)メニューのインデックスと速度をオブジェクトリテラルで指定できます。インデックスはindexプロパティに数値もしくは数値の配列で指定します。速度はspeedプロパティに数値(単位はミリ秒)で指定します。第2引数を指定しない場合は全てのメニューがデフォルトもしくはプラグイン実行時に指定した速度で開閉します。
JavaScript
//全てのメニューを開く
$(セレクタ).ithAccordion('open');
//全てのメニューを1秒かけて閉じる
$(セレクタ).ithAccordion('close', {speed:1000});
//2番目のメニューを開く
$(セレクタ).ithAccordion('open', {index:1});
//1番目と4番目のメニューを閉じる
$(セレクタ).ithAccordion('close', {index:[0, 3]});
//1番目と4番目のメニューを0.5秒かけて開く
$(セレクタ).ithAccordion('open', {index:[0, 3], speed:500});
オプション
設定可能なオプション項目です。
プロパティ | 型 | 初期値 | 説明 |
opened | int|[int]|null | null | ページ読み込み時に開かれているメニュのインデックスを指定 |
allowMultiple | bool | true | 複数のメニューを同時に開いた状態にできるか |
speed | int | 200 | メニュー開閉速度(ミリ秒) |