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

基本的なアコーディオンの作成と構成は簡単ですが、より高度なオプションはやや複雑になる可能性があるため、必ず記事全体を注意深く読む必要があります。
基本
新しいアコーディオンの作成
新しいアコーディオンを作成するには、タイトルとコンテンツを含む要素のペアをいくつか選択する必要があります。したがって、まず、各タイトルと各コンテンツ ブロックに CSS クラス名を割り当てる必要があります。
参照コード:

コードをコピー コードは次のとおりです:

Toggle 1

の内容は次のとおりです。トグル 1

トグル 2

トグル 2

🎜>

ここで、CSS クラス名「togglers」を持つすべての要素と、CSS クラス名「elements」を持つすべての要素を選択し、変数に代入して、アコーディオン オブジェクトを初期化します。
参照コード:

コードをコピー コードは次のとおりです:

var toggles = $$( '.togglers');
var content = $$('.elements');
// オブジェクト変数を作成します
// 新しいアコーディオン オブジェクトを作成するには、"new" を使用します
/ / スイッチ (トゥーグル) 配列を設定します
// コンテンツ配列を設定します
var AccordionObject = new Accordion(toggles, content);

アコーディオンのデフォルト設定は次のようになります。このエフェクトは次のとおりです。
トグル 1
トグル 1 の内容は次のとおりです。
トグル 2
トグル 2 の内容はこちらです。
トグル 3
トグル 3 の内容はこちらです

オプション
もちろん、アコーディオンのデフォルトのエフェクト以外の効果が必要な場合は、オプションを微調整する必要があります。ここでは、それらを一つずつ説明していきます。
display
デフォルトは 0
このオプションは、ページのロード時にどの要素が表示されるかを決定します。デフォルト値は 0 なので、最初の要素が表示されます。別の要素に設定したい場合は、別の要素のインデックス値 (整数) に設定するだけです。 「show」とは異なり、「display」ではグラデーションアニメーションを使用して要素を展開します。
参照コード:

コードをコピー コードは次のとおりです:

var AccordionObject = new Accordion( toggles, content {
display: 0 // デフォルトは 0
});

show
デフォルトは 0
は「display」とよく似ています, 「show」 ページの読み込み時に展開する要素を決定しますが、グラデーション アニメーションはありません。グラデーション アニメーションを使用せずにページの読み込み後にのみ表示されます。
参照コード:

コードをコピー コードは次のとおりです:

var AccordionObject = new Accordion( toggles, content {
display: 0 // デフォルトは 0
});

height
デフォルトは true
true に設定すると、コンテンツが高階調のアニメーション効果が表示されます。これは上で見たものと同じ、標準的なアコーディオンのセットアップです。
参照コード:

コードをコピー コードは次のとおりです:

var AccordionObject = new Accordion( toggles, content {
height: true // デフォルトは true
});

width
デフォルトは false
「height」と似ていますが、高さのグラデーション アニメーションを使用してコンテンツを表示する代わりに、幅のグラデーション アニメーションを使用してコンテンツを表示します。これまでに説明した他の標準設定とともに「幅」オプションを使用すると、コンテンツの高さのみに基づいて、個々のタイトル スイッチ間の距離は同じままになります。コンテンツ div は左から右に徐々に幅が広くなり、コンテンツが表示されます。
参照コード:

コードをコピー コードは次のとおりです:

var AccordionObject = new Accordion( toggles, content {
width: false // デフォルトは false
});

opacity
デフォルトは true
このオプションは、非表示にするか、 show content 、不透明度グラデーション効果を使用するかどうか。上記のデフォルト設定を使用したため、効果がわかります。
参照コード:

コードをコピー コードは次のとおりです:

var AccordionObject = new Accordion(toggles, content {
opacity: true // デフォルトは true
});

fixedHeight
デフォルトは false
固定の高さを設定するには、ここで整数を設定できます (たとえば、100 を設定すると、コンテンツの高さが 100 ピクセルになります)。設定する高さがコンテンツの高さより小さい場合は、CSS でコンテンツのオーバーフロー属性を設定する必要があります。ご想像のとおり、「show」オプションを使用すると、ページが最初に読み込まれるときにこのオプションは登録されません。
参照コード:

コードをコピー コードは次のとおりです:

var AccordionObject = new Accordion( toggles, content {
fixedHeight: false // デフォルトは false
});

fixedWidth
デフォルトは false
上記の「fixedHeight」と同様、このオプションに整数が指定されている場合、その幅が設定されます。
参照コード:

コードをコピー コードは次のとおりです:

var AccordionObject = new Accordion( toggles, content {
fixedWidth: false // デフォルトは false
});

alwaysHide
デフォルトは false
このオプションを使用すると、タイトルに切り替えます。このオプションを true に設定すると、コンテンツが展開されたヘッダーをクリックすると、コンテンツ ブロックは閉じますが、要素は展開されません。以下の例ですぐにわかります。
参照コード:

コードをコピー コードは次のとおりです:

var AccordionObject = new Accordion( toggles, content {
alwaysHide: false // デフォルトは false
});

Event
onActive
このイベントは要素を切り替えるとトリガーされます。彼は、スイッチ コントロール要素とコンテンツ要素、およびスイッチの状態をパラメータとして渡します。
参照コード:

コードをコピー コードは次のとおりです:

var AccordionObject = new Accordion( toggles, content {
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); // Green
element.highlight('#76C83D');
}
});

onBackground
このイベントは、ige 要素が非表示になり始めるとトリガーされ、展開された要素ではなく、他のすべての通常の閉じられた要素をパラメーターとして渡します。
参照コード:

コードをコピー コードは次のとおりです:

var AccordionObject = new Accordion( toggles, content {
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); // Red
element.highlight('#DC4F4D');
}
});

onComplete
これは標準の onComplete イベントです。コンテンツ要素を含む変数が渡されます。これらを入手する別のより良い方法があります。知っている人がいたらメモしてください。
参照コード:

コードをコピー コードは次のとおりです:

var AccordionObject = new Accordion( toggles, content {
onComplete: function(one, two, three, four){
one.highlight('#5D80C8'); // blue
two.highlight('#5D80C8' );
three.highlight('#5D80C8');


メソッド
.addSection();
このメソッドを使用すると、中央にセクション (タイトル/コンテンツ要素のペア) を追加できます。これは、これまでに見てきた他の多くの方法と同じです。まず、アコーディオン オブジェクトを参照し、続いて .addSection を参照します。次に、タイトルの ID、コンテンツの ID を呼び出し、最後に位置 (この新しい要素が表示される位置) を指定します (0 が最初です)。位置） 。
リファレンスコード: [コードをコピー] [コードを保存]
AccordionObject.addSection('togglersID', 'elementsID', 2);
注: この方法でセクションを追加すると、インデックスが作成されます。値 2 が表示されますが、実際のインデックスは最後のインデックス値に 1 を加えた値である必要があります。配列内に 5 つの項目があり、6 番目の項目を追加すると、 .addSection() メソッドで追加した場所に関係なく、そのインデックスは 5 になります。
.display();
このメソッドを使用すると、指定された要素を展開できます。要素はインデックスによって選択します (要素の新しいペアを追加し、それらを展開したい場合は、新しいインデックスを使用する必要があります)。
参照コード:

コードをコピー コードは次のとおりです:

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

Example
ここでは、上で見たすべてのイベントとメソッド、およびその他のオプションを使用した、完全に機能するアコーディオンを示します。以下のコードとコード内の関連コメントを注意深く読んで、その使用方法を確認してください。
参照コード:

コードをコピー コードは次のとおりです:

// トグル要素とコンテンツ要素を 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 ファイルが含まれています。