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>

您將收到以下輸出 -

輸出

手風琴選項

手風琴提供了強大的功能。這些功能有助於調整選項以提供自定義輸出。

display

此選項確定頁面載入時顯示哪個元素。預設設定為 0，因此顯示第一個元素。要設定其他元素，只需輸入與之對應的另一個整數即可。與“show”不同，display 會過渡開啟元素。

語法

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

show

與“display”類似，“show”確定頁面載入時哪個元素將處於開啟狀態，但它不是過渡，而是“show”只會使內容在載入時顯示，沒有任何過渡。

語法

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

height

當設定為 true 時，在切換顯示元素之間會發生高度過渡效果。這是您在上面看到的標準手風琴設定。

語法

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

width

此選項的工作原理與height選項相同。但是，它不是過渡高度以顯示內容，而是有助於過渡寬度。如果您將“width”與標準設定一起使用，就像我們上面使用的那樣，則標題切換之間的空間將保持不變，基於內容的高度。“content”div 然後將從左到右過渡以顯示在該空間中。

語法

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

opacity

此選項確定在隱藏或顯示某些內容時是否顯示不透明度過渡效果。由於我們上面使用了預設選項，因此您可以在那裡看到效果。

語法

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

fixedHeight

要設定固定高度，您需要設定一個整數（例如，您可以將內容設定為 100px 高的 100）。如果您計劃使用小於內容自然高度的固定高度，則應將其與某種 CSS overflow 屬性一起使用。

語法

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

fixedWidth

就像上面的“fixedHeight”一樣，如果為此選項提供一個整數，它將設定寬度。

語法

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

alwaysHide

此選項允許您向標題新增切換控制元件。當此選項設定為 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 個，則無論您使用 .addSection() 在哪裡新增它，其索引都將為 5。

display()

這允許您開啟給定元素。您可以透過其索引選擇元素（因此，如果您添加了一個元素對並且想要顯示它，則此處將與上面使用的索引不同。

語法

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>

輸出

單擊每個切換部分，然後您將找到隱藏的資料和每個操作的事件指示器。

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.