MooTools-アコーディオン

アコーディオンは、MooToolsが提供する最も人気のあるプラグインです。データの非表示と表示に役立ちます。それについてもっと話し合いましょう。

新しいアコーディオンを作成する

アコーディオンに必要な基本的な要素は、トグルのペアとその内容です。htmlの見出しとコンテンツのペアを作成しましょう。

<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>

上記のHTML構造に基づいてアコーディオンを構築する方法を理解するには、次の構文を参照してください。

構文

var toggles = $$('.togglers');
var content = $$('.elements');
var AccordionObject = new Fx.Accordion(toggles, content);

例

アコーディオンの基本的な機能を定義する例を見てみましょう。次のコードを見てください。

<!DOCTYPE html>
<html>

   <head>
      <style>
         .togglers {
            padding: 4px 8px;
            color: #fff;
            cursor: pointer;
            list-style: none;
            width: 300px;
            background-color: #222;
            border: 1px solid;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var toggles = $$('.togglers');
            var content = $$('.elements');
            var AccordionObject = new Fx.Accordion(toggles, content);
         });
      </script>
   </head>
   
   <body>
      <h3 class = "togglers">Toggle 1</h3>
      <p class = "elements">Here is the content of toggle 1</p>
      <h3 class = "togglers">Toggle 2</h3>
      <p class = "elements">Here is the content of toggle 2</p>
      <h3 class = "togglers">Toggle 3</h3>
      <p class = "elements">Here is the content of toggle 3</p>
   </body>
   
</html>

次の出力が表示されます-

出力

アコーディオンオプション

アコーディオンは途方もない機能を提供します。これらの機能は、カスタマイズされた出力を提供するためのオプションを微調整するのに役立ちます。

表示

このオプションは、ページの読み込み時に表示される要素を決定します。デフォルトは0に設定されているため、最初の要素が表示されます。別の要素を設定するには、そのインデックスに対応する別の整数を入力するだけです。「show」とは異なり、displayは要素を開いた状態に移行します。

Syntax

var AccordionObject = new Accordion(toggles, content {
   display: 0 //default is 0
});

公演

「display」と同様に、showはページの読み込み時に開く要素を決定しますが、トランジションの代わりに、「show」はトランジションなしで読み込み時にコンテンツを表示するだけです。

Syntax

var AccordionObject = new Accordion(toggles, content {
   show: 0 //default is 0
});

高さ

trueに設定すると、表示されている要素を切り替えるときに高さ遷移効果が発生します。これは、上記の標準的なアコーディオン設定です。

Syntax

var AccordionObject = new Accordion(toggles, content {
   height: true //default is true
});

幅

これは、 heightオプション。ただし、コンテンツを表示するために高さを遷移する代わりに、これは幅の遷移に役立ちます。上記のように標準設定で「幅」を使用する場合、コンテンツの高さに基づいて、タイトルトグル間のスペースは同じままになります。次に、「content」divが左から右に遷移して、そのスペースに表示されます。

Syntax

var AccordionObject = new Accordion(toggles, content {
   width: false //default is false
});

不透明度

このオプションは、一部のコンテンツを非表示または表示するときに不透明度遷移効果を表示するかどうかを決定します。上記のデフォルトオプションを使用しているので、そこで効果を確認できます。

Syntax

var AccordionObject = new Accordion(toggles, content {
   opacity: true //default is true
});

fixedHeight

固定の高さを設定するには、整数を固定する必要があります（たとえば、100pxの高さのコンテンツに100を設定できます）。これは、コンテンツの自然な高さよりも小さい固定の高さを計画している場合に、ある種のCSSオーバーフロープロパティとともに使用する必要があります。

Syntax

var AccordionObject = new Accordion(toggles, content {
   fixedHeight: false //default is false
});

fixedWidth

上記の「fixedHeight」と同様に、このオプションに整数を指定すると、幅が設定されます。

Syntax

var AccordionObject = new Accordion(toggles, content {
   fixedWidth: false //default is false
});

alwaysHide

このオプションを使用すると、タイトルにトグルコントロールを追加できます。これをtrueに設定すると、開いているコンテンツタイトルをクリックすると、コンテンツ要素は何も開かずに自動的に閉じます。次の例で実行を確認できます。

Syntax

var AccordionObject = new Accordion(toggles, content {
   alwaysHide: false //default is false
});

アコーディオンイベント

これらのイベントを使用すると、アコーディオンのすべてのアクションに対して機能を作成できます。

onActive

これは、要素を切り替えると実行されます。トグルコントロール要素と開いているコンテンツ要素、およびパラメータを渡します。

Syntax

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

onBackground

これは、要素が非表示になり始め、閉じているが開いていない他のすべての要素を渡すときに実行されます。

Syntax

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

onComplete

これは標準のonCompleteイベントです。content要素を含む変数を渡します。

Syntax

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

アコーディオンメソッド

これらのメソッドは、アコーディオンセクションの作成と操作に役立ちます。

addSection（）

このメソッドを使用すると、セクション（トグル/コンテンツ要素のペア）を追加できます。これは、これまでに見た他の多くの方法と同じように機能します。最初にアコーディオンオブジェクトを参照し、.addSectionを使用します。次に、タイトルのID、コンテンツのIDを呼び出し、最後に新しいコンテンツを表示する位置を指定します（0が最初のスポットです）。

Syntax

AccordionObject.addSection('togglersID', 'elementsID', 2);

Note−このようなセクションを追加すると、インデックス2のスポットに表示されますが、実際のインデックスは最後のインデックスの+1になります。したがって、配列（0〜4）に5つの項目があり、6番目を追加すると、.addSection（）で追加する場所に関係なく、そのインデックスは5になります。

表示（）

これにより、特定の要素を開くことができます。インデックスで要素を選択できます（したがって、要素ペアを追加して表示したい場合は、上記で使用したものとは異なるインデックスがここにあります。

Syntax

AccordionObject.display(5); //would display the newly added element

Example

次の例では、いくつかの効果を持つアコーディオン機能について説明します。次のコードを見てください。

<!DOCTYPE html>
<html>

   <head>
      <style>
         .togglers {
            color: #222;
            margin: 0;
            padding: 2px 5px;
            background: #EC7063;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #f5f5f5;
            border-left: 1px solid #f5f5f5;
            font-size: 15px;
            font-weight: normal;
            font-family: 'Andale Mono', sans-serif;
         }
         
         .ind {
            background: #2E86C1;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #f5f5f5;
            border-left: 1px solid #f5f5f5;
            font-size: 20px;
            color: aliceblue;
            font-weight: normal;
            font-family: 'Andale Mono', sans-serif;
            width: 200px;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var toggles = $$('.togglers');
            var content = $$('.elements');
            
            var AccordionObject = new Fx.Accordion(toggles, content, {
               show: 0,
               height : true,
               width : false,
               opacity: true,
               fixedHeight: false,
               fixedWidth: false,
               alwaysHide: true,
               
               onActive: function(toggler, element) {
                  toggler.highlight('#DC7633'); //green
                  element.highlight('#DC7633');
                  $('active').highlight('#DC7633');
               },
               
               onBackground: function(toggler, element) {
                  toggler.highlight('#AED6F1'); //red
                  element.highlight('#AED6F1');
                  $('background').highlight('#F4D03F');
               }
            });
            $('display_section').addEvent('click', function(){
               AccordionObject.display(4);
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "active" class = "ind">onActive</div>
      <div id = "background" class = "ind">onBackground</div>
      
      <div id = "accordion_wrap">
         <p class = "togglers">Toggle 1: click here</p>
         <p class = "elements">Here is the content of toggle 1 Here is the content of
            toggle 1 Here is the content of toggle 1 Here is the content of toggle 1 Here
            is the content of toggle 1 Here is the content of toggle 1 Here is the content
            of toggle 1 Here is the content of toggle 1</p>
         <p class = "togglers">Toggle 2: click here</p>
         <p class = "elements">Here is the content of toggle 2</p>
         <p class = "togglers">Toggle 3: click here</p>
         <p class = "elements">Here is the content of toggle 3</p>
         <p class = "togglers">Toggle 4: click here</p>
         <p class = "elements">Here is the content of toggle 4</p>
      </div>
      
      <p>
         100
         <button id = "display_section" class = "btn btn-primary">
            display section
         </button>
      </p>
      
   </body>
</html>

Output

各Toggleセクションをクリックすると、すべてのアクションの非表示データとイベントインジケーターが表示されます。

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved