Mootools 1.2 アコーディオン チュートリアル_Mootools

AccordionObject.display (5) ; // これにより、新しく追加された要素が表示されます

// トグル要素とコンテンツ要素を 2 つの変数に割り当てます
var toggles = $$('.togglers');
var content = $$('.elements'); >// オブジェクト変数を作成します
// new を使用して新しいアコーディオン オブジェクトを作成します
// スイッチ配列を設定します
// コンテンツ配列を設定します
// 関連するオプションとイベントを設定します
var AccordionObject = new Accordion(toggles, content, {
// ページが読み込まれるとき
// これにより、コンテンツ要素 (インデックスに対応する要素)
// グラデーション アニメーションなしで表示されます。
を展開するだけです。// また、「fixedHeight」を使用する場合、
// ページが最初に読み込まれるとき、show オプションは機能しません
// "show" オプションは "display" オプションをオーバーライドします
show: 0,
// ページが読み込まれるとき
// これにより、コンテンツ要素 (インデックスに対応する要素) が表示 (表示) されます
// コンテンツが展開されると、グラデーション アニメーション
// 表示オプションと表示オプションが同時に設定されている場合
// 表示オプションは表示オプションをオーバーライドします
// 表示: 0,
// デフォルトはtrue
// これは垂直アコーディオンが作成されます
height : true,
// これは使用される水平アコーディオンパラメータです
// CSS が関与するため、これはより複雑になります
// それについては後で説明します もう一度話しましょう?
width: false,
// デフォルトは true
// これにより、コンテンツに不透明度のグラデーション効果が与えられます
opacity: true,
// デフォルトは false、または整数にすることができます -
// すべてのコンテンツ ブロックの高さは固定されます
// CSS でオーバーフロー ルールを設定する必要があります
// "show" を使用した場合、ページの最初のページ 初めてロードするときは有効になりません
fixedHeight: false,
// false または整数にすることができます
// 以下に似ています上記のfixedHeight、
// ただし、これは水平アコーディオンの設定です
fixedWidth: false,
// 展開された項目を切り替えることができます
alwaysHide: true、
// 標準onComplete イベント
// 各コンテンツ ブロック要素の変数を渡します
onComplete: function(one, two, three, four, four){
one.highlight('#5D80C8'); // blue
two.highlight('#5D80C8');
three.highlight('#5D80C8');
five.highlight('#5D80C8'); ; // これは追加されたセクションです
$('complete ').highlight('#5D80C8');
},
// このイベントは要素を切り替えるとトリガーされます
/ / 開かれている switch 要素
// と Content 要素
onActive: function(toggler, element) {
toggler.highlight('#76C83D') // Green
element.highlight; を渡します。 ('#76C83D');
$('active ').highlight('#76C83D');
},
// このイベントは、要素が非表示になり始めるとトリガーされます。 / すべての終了要素
// または展開されていない要素
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D') // Red
element.highlight(') を渡します。 #DC4F4D');
$('背景').highlight('#DC4F4D');
$('add_section').addEvent('クリック', 関数(){
// 新規追加 セクションはペアになっています
// (スイッチの ID と関連コンテンツの ID を含む)
// セクションの位置のインデックスが続きます配置
AccordionObject.addSection('togglersID', 'elementsID ',
});
$('display_section').addEvent('click', function(){
//ページが最初にロードされるときにどの要素が表示されるかを決定します
// 表示オプション設定をオーバーライドします
AccordionObject.display(4)
});
ここでは、イベントがいつトリガーされたかを確認できます。
onCompleteonActivonBackground
下のボタンを使用して、コンテンツのペアを追加してみてください。
トグル 1
トグル 1 の内容はこちら トグル 1 の内容はこちら トグル 1 の内容はこちら トグル 1 の内容はこちら トグル 1 の内容はこちらトグル 1 の内容はこちら
トグル 2
トグル 2 の内容はこちら
トグル 3
トグル 3 の内容はこちら
トグル 4
トグル 4
の内容はこちらtoggle 4
Toggle Add
toggle 4 の内容です


注意事項
.display でインデックスを識別できますが、addSection メソッドを使用する場合、このセクションは最後のインデックスが使用されます
「fixedHeight」オプションを使用する場合、「show」オプションでは効果がありませんが、「display」オプションでは効果があります
その他のアコーディオン オプション、イベントおよびメソッド
Accordion クラスは Fx.Element クラスを継承し、さらに Fx.Element クラスは Fx クラスを継承します。これらのクラスのさまざまなオプションを使用して、アコーディオンを最適化できます。単純なことのように思えるかもしれませんが、アコーディオンは非常に便利で強力なプラグインです。誰かがこれでどんな効果を生み出すのか見てみたいです。

さらに詳しく

ドキュメントの アコーディオン セクション 、および Fx.Elements および Fx を参照してください。 これら 2 つのセクション。 MooTools

の公式デモでアコーディオンの使用方法を確認することもできます。

開始するために必要なものがすべて入った zip パッケージをダウンロードします

MooTools 1.2 のコア ライブラリと拡張 (その他) ライブラリ、上記の例、外部 JavaScript ファイル、単純な HTML ページ、および CSS ファイルが含まれています。