Class: Accordion

Accordionクラスはハンドラがクリックされた時にトグルされる要素のグループを作ります。一つの要素がトグルされて表示されると、別の要素もすべてトグルされて非表示になります。

注意点:

• Accordionを使うには、標準準拠モードでページを作成する必要があります。
• Accordion要素は、アニメーションを正しく表示するために、パディングとボーダーを取り除かれます。一番よい練習方法は、要素のコンテナとしてアコーディオンを使い、好きなようにスタイリングしてみることです。

Extends:

Fx.Elements

構文:

var myAccordion = new Accordion(togglers, elements[, options]);

引数:

1. togglers - (配列) 要素の配列。これをクリックすることでトリガーとなり、アコーディオン内の特定のセクションが開きます。
2. elements - (配列) アニメーションが適用される要素の配列。
3. options - (オブジェクト, オプション) すべてのFxオプションに加え、以下のものが指定できます。

オプション:

• display - (整数: 初期値=0) はじめに表示されている要素のインデックス(アニメーションあり)。
• show - (整数: 初期値=0) はじめから表示されている要素のインデックス(アニメーションなし)。
• height - (真偽値: 初期値=true) trueにセットされていれば、表示される要素が切り替わるときに高さ変更のアニメーションが加わります。
• width - (真偽値: 初期値=false) trueにセットされていれば、表示される要素が切り替わるときに幅変更のアニメーションが加わります。
• opacity - (真偽値: 初期値=true) trueにセットされていれば、表示される要素が切り替わるときに透明度変更エフェクトが加わります。
• fixedHeight - (真偽値: 初期値=false) trueにセットされると、表示されている要素は固定の高さを持ちます。
• fixedWidth - (真偽値: 初期値=false) trueにセットされると、表示されている要素は固定の幅を持ちます。
• alwaysHide - (真偽値: 初期値=false) trueにセットされると、すべての要素を閉じることができるようになります。falseならば、必ず1つは開いたままになります。
• width - (真偽値: 初期値=false) trueにセットされると、アコーディオンに幅変更のエフェクトが加わります。警告:これを動かすには、CSSマスターである必要があります！

戻り値:

• (オブジェクト) 新しいAccordionインスタンス。

イベント:

active

• (関数) 要素が表示されるときに発生します。

表記:

onActive(toggler, element)

引数:

1. toggler - (要素) 表示された要素のトグラー。
2. element - (要素) 表示された要素。

background

• (関数) 要素が非表示になるときに発生します。

Signature:

onBackground(toggler, element)

引数:

1. toggler - (要素) 表示されていた要素のトグラー。
2. element - (要素) 表示されていた要素。

例:

var myAccordion = new Accordion($$('.togglers'), $$('.elements'), {

    display: 2,
    alwaysHide: true
});

デモ:

• Accordion - http://demos.mootools.net/Accordion

Accordionメソッド: addSection

Accordionインスタンスの指定した位置に、新しいセクションを動的に追加します。

構文:

myAccordion.addSection(toggler, element[, pos]);

引数:

1. toggler - (要素) アコーディオンのセクションを開くトグラーとなる要素。
2. element - (要素) トグラーがクリックされたときに開く要素。
3. pos - (整数, オプション) アコーディオン内にセクションが挿入される位置(初期値は最後)

戻り値:

• (オブジェクト) このAccordionインスタンス。

例:

var myAccordion = new Accordion($$('.togglers'), $$('.elements'));
myAccordion.addSection('myToggler1', 'myElement1'); // 最後の部分にセクションを追加します。

myAccordion.addSection('myToggler2', 'myElement2', 0); //先頭にセクションを追加します。

Accordionメソッド: display

指定したセクションを開き、他を非表示にします。外部からアコーディオンを操作するのに役立ちます。

構文:

myAccordion.display(index);

引数:

1. index - (いろいろ) 表示したいセクションのインデックス。または、要素そのもの。

戻り値:

• (オブジェクト) このAccordionインスタンス。

例:

// ティッカー風のアコーディオン。子供は家でやらないように。
var myAccordion = new Accordion('.togglers', '.elements', {
    onComplete: function(){

        this.display.delay(2500, this, (this.previous + 1) % this.togglers.length);
    }

});