Menu

30天學會 MooTools 教學(17): 手風琴（Accordion）教程

繼續我們的「更多」（More）庫裡面的插件教程，今天我們來學習一下可能是最流行最受歡迎的插件——手風琴。創建和配置一個基本的手風琴很簡單，但是你一定要認真看完全文，因為更多的高級選項可能有一些複雜。


基礎知識

創建一個新的手風琴

要創建一個新的手風琴，你需要選擇一些成對的元素——包含標題和內容。因此，首先，需要給每一個標題和每一個內容塊分別指定一個css類名：

參考代碼：

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

現在，我們選擇所有css類名為「togglers」和所有css類名為「elements」的元素，並把它們賦值給變量，然後初始化一個手風琴對象。

參考代碼：

var toggles = $$('.togglers');  
 var content = $$('.elements');  
 
 // 創建你的對象變量  
 // 使用「new」創建一個新的手風琴對象  
 // 設置開關（toogle）數組  
 // 設置內容數組  
 var AccordionObject = new Accordion(toggles, content);


手風琴的默認設置給你的效果可能是這樣的：

 

Toggle 1

Here is the content of toggle 1

Toggle 2
Toggle 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」類似，不過不是使用高度漸變動畫來顯示內容，而是使用寬度漸變動畫來顯示內容。如果你把「width」選項和其他我們看到的標準 設置一起使用，各個標題開關之間的距離將保持不變，這個距離完全基於內容的高度。內容的div將會從左到右，寬度逐漸變寬來顯示內容。

參考代碼：

var AccordionObject = new Accordion(toggles, content {    
      width: false // 默認為false


opacity

默認為true

這個選項設置了當你隱藏或者顯示內容時，是否使用不透明度漸變效果。由於我們在上面使用了默認設置，所以你可以看到效果。

參考代碼：

var AccordionObject = new Accordion(toggles, content {    
      opacity: true // 默認為true


fixedHeight

默認為false

要設置一個固定的高度，你可以在這裡設置一個整數（例如，你可以設置100，從而可以使得內容的高度為100px）。如果你準備設置的高度小於內容 的高度，在這裡你需要在CSS中設置一下內容的overflow屬性。和你可能的期望一樣，當你使用「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

事件

onActive

當你開關一個元素時觸發這個事件。他將會傳遞這個開關控制元素和內容元素，還有開關狀態作為參數。 

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

onBackground

當ige元素開始隱藏時觸發這個事件，它將傳遞所有其他正則關閉的元素作為參數，而不是展開的元素。

參考代碼：

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


onComplete

這是一個標準的onComplete事件。它傳遞一個包含內容元素的變量。這裡又一種更好的方式獲取這些東西，如果有人知道，可以作個記錄。 

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

方法

.addSection();

通過這個方法，你可以在中間添加一節（一個標題/內容元素對）。這個我們見過的許多其他方法一樣。首先，我們引用一個手風琴對象，在後面加 上.addSection，然後你可以調用標題的id、內容的id，最後給它指定一個位置——這個新元素要出現的位置（0是第一個位置）。

注意：當你通過這個方式添加一節，雖然它會在索引值為2的地方顯示，但是它的真實索引應該是最後一個索引值加1。如果你在一個數組中有5個項，然後你添加了第六個，它的索引值則為5，而不管你通過.addSection();方法把它添加在了什麼地方。

.display();

這個方法可以讓你展開一個指定的元素。你可以通過它的索引值來選擇這個元素（如果你添加了一個新的元素對，你又想展開它們，你需要使用一個新的索引值）。 

AccordionObject.display(5); // 這將顯示你新增加的元素

實例演示

這裡我們有一個全功能的手風琴，使用了上面我們看到的所有事件和方法，還有非常多的選項。仔細閱讀下面的代碼和代碼內相關的註釋，看看它們是怎麼使用的。 

// 把開關元素和內容元素賦值給兩個變量  
 var toggles = $$('.togglers');  
 var content = $$('.elements');  
 
 // 建立一個對象變量  
 // 使用new創建一個新的手風琴對象  
 // 設置開關數組  
 // 設置內容數組  
 // 設置相關選項和事件  
 var AccordionObject = new Accordion(toggles, content, {  
      // 當頁面載入後  
      // 這將顯示（show）內容元素（對應索引的元素）  
      // 沒有任何漸變動畫，只是展開  
      // 同時注意：如果你使用了「fixedHeight」，  
      // 當頁面第一次載入時，show選項將不會起作用  
      // "show"選項會覆蓋"display"選項  
      show: 0,    
 
 
      // 當頁面載入後  
      // 這將顯示（display）內容元素（對應索引的元素）  
      // 內容展開時將有漸變動畫  
      // 如果同時設置了display選項和show選項  
      // show選項將覆蓋display選項  
      // display: 0,  
 
      // 默認為true  
      // 這將創建一個垂直的手風琴  
      height : true,  
 
      // 這是水平手風琴參數使用的  
      // 由於牽涉到CSS，這個會比較複雜  
      // 我們在後面的某一講中再講一下？  
      width : false,  
 
      // 默認為true  
      // 這將會給內容一個不透明度的漸變效果  
      opacity: true,  
 
      // 默認為false，也可以是一個整數 -    
      // 將固定所有內容區塊的高度  
      // 需要設置css中的overflow規則  
      // 如果使用了"show"，在頁面第一次載入時不會生效  
      fixedHeight: false,    
 
      // 可以為false或者一個整數  
      // 和上面的fixedHeight類似，  
      // 不過這是針對水平手風琴的設置  
      fixedWidth: false,  
 
      // 可以讓你開關一個展開的項  
      alwaysHide: true,  
 
      // 標準的onComplete事件  
      // 為每一個內容塊元素傳遞一個變量           
      onComplete: function(one, two, three, four, five){  
          one.highlight('#5D80C8'); // 藍色  
          two.highlight('#5D80C8');  
          three.highlight('#5D80C8');  
          four.highlight('#5D80C8');    
          five.highlight('#5D80C8'); // 這是添加的節  
          $('complete').highlight('#5D80C8');  
      },  
 
      // 這個事件將在你開關一個元素時觸發  
      // 將會傳遞正在打開的開關元素  
      // 和內容元素  
      onActive: function(toggler, element) {  
          toggler.highlight('#76C83D'); // 綠色  
          element.highlight('#76C83D');  
          $('active').highlight('#76C83D');  
      },  
 
      // 這個事件將在一個元素開始隱藏時觸發  
      // 將會傳遞所有正在關閉的元素  
      // 或者沒有展開的元素  
      onBackground: function(toggler, element) {  
          toggler.highlight('#DC4F4D'); // 紅色  
          element.highlight('#DC4F4D');       
          $('background').highlight('#DC4F4D');       
      }  
 });  
 
 $('add_section').addEvent('click', function(){  
      // 新增加的節是成對的    
      // （包括開關的id和相關的內容的id）  
      // 後面是它們要放置的位置的索引  
      AccordionObject.addSection('togglersID', 'elementsID', 0);       
 });  
 
 $('display_section').addEvent('click', function(){  
      // 將決定哪個元素在頁面第一次載入時顯示  
      // 將覆蓋display選項的設置  
      AccordionObject.display(4);


要注意的地方



.display可以識別索引（index），不過如你使用了addSection方法，那麼這一節將使用最後一個索引

更多手風琴選項、事件和方法

手風琴（Accordion）類繼承自Fx.Element類，而Fx.Element類又繼承自Fx類。你可以使用這些類的各種選項來優化你的手風琴（Accordion）。雖然它看起來是個很簡單的東西，但是手風琴是一個非常有用和強大的插件。我非常樂意看到有人利用這個做出的任何效果。


更多學習

參考文檔中的accordion這一節，還有Fx.Elements和Fx這兩節。你還可以看看MooTools官方demo中的accordion的使用。

遠程下載：下載一個包含你開始所需要的所有東西的zip包

包括MooTools 1.2的核心庫和擴展（更多）庫，上面的示例，一個外部的JavaScript文件，一個簡單的HTML頁面和一個CSS文件。

 

Mootools 教學列表：