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」とは異なり、ディスプレイは要素を開いて遷移します。

構文

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

show

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

構文

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

高さ

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

構文

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

幅

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

構文

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

不透明度

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

構文

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

fixedHeight

固定の高さを設定するには、整数を修正する必要があります（たとえば、コンテンツの高さ100ピクセルに100を入れることができます）。コンテンツの自然な高さよりも低い固定高さを計画している場合、これは何らかのCSSオーバーフロープロパティと共に使用する必要があります。

構文

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

fixedWidth

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

構文

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

常に非表示

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

構文

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

アコーディオンイベント

これらのイベントにより、アコーディオンのすべてのアクションの機能を作成できます。

onActive

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

構文

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

onBackground

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

構文

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');
      four.highlight('#5D80C8');
   }
});

アコーディオン法

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

addSection（）

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

構文

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

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

表示（）

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

構文

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

例

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

<!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>

出力

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

Mootools-accordion