Mootools 1.2 手風(fēng)琴（Accordion）教程

更新時間：2009年09月15日 22:11:40 作者：

繼續(xù)我們的“更多”（More）庫里面的插件教程，今天我們來學(xué)習(xí)一下可能是最流行最受歡迎的插件——手風(fēng)琴。

創(chuàng)建和配置一個基本的手風(fēng)琴很簡單，但是你一定要認(rèn)真看完全文，因為更多的高級選項可能有一些復(fù)雜。
基礎(chǔ)知識
創(chuàng)建一個新的手風(fēng)琴
要創(chuàng)建一個新的手風(fēng)琴，你需要選擇一些成對的元素——包含標(biāo)題和內(nèi)容。因此，首先，需要給每一個標(biāo)題和每一個內(nèi)容塊分別指定一個css類名：
參考代碼：

復(fù)制代碼代碼如下:

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

現(xiàn)在，我們選擇所有css類名為“togglers”和所有css類名為“elements”的元素，并把它們賦值給變量，然后初始化一個手風(fēng)琴對象。
參考代碼：

復(fù)制代碼代碼如下:

 
var toggles = $$('.togglers'); 
var content = $$('.elements'); 
// 創(chuàng)建你的對象變量 
// 使用“new”創(chuàng)建一個新的手風(fēng)琴對象 
// 設(shè)置開關(guān)（toogle）數(shù)組 
// 設(shè)置內(nèi)容數(shù)組 
var AccordionObject = new Accordion(toggles, content); 

手風(fēng)琴的默認(rèn)設(shè)置給你的效果可能是這樣的：
Toggle 1
Here is the content of toggle 1
Toggle 2
Here is the content of toggle 2
Toggle 3
Here is the content of toggle 3

選項
當(dāng)然，如果你想要手風(fēng)琴默認(rèn)效果以外的東西，你需要調(diào)整一下選項。在這里我們將逐個講解。
display
默認(rèn)為0
這個選項決定了當(dāng)頁面加載后哪個元素會顯示出來。默認(rèn)值為0，因此第一個元素會顯示出來。如果要設(shè)置為其他元素，只需要設(shè)置為另外一個元素的索引值（為整數(shù)）就可以了。和“show”不一樣，“display”將會使用漸變動畫讓元素展開。
參考代碼：

復(fù)制代碼代碼如下:

 
var AccordionObject = new Accordion(toggles, content { 
display: 0 // 默認(rèn)為0 
}); 

show
默認(rèn)為0
和“display”非常類似，“show”決定了當(dāng)頁面加載后那個元素將會展開，不過它沒有漸變動畫，它只是在頁面加載后顯示出來，而不使用任何漸變動畫。
參考代碼：

復(fù)制代碼代碼如下:

 
var AccordionObject = new Accordion(toggles, content { 
display: 0 // 默認(rèn)為0 
}); 

height
默認(rèn)為true
當(dāng)設(shè)置為true，內(nèi)容顯示時，將有高度漸變動畫效果。這和你上面看到的一樣，是一個標(biāo)準(zhǔn)的手風(fēng)琴設(shè)置。
參考代碼：

復(fù)制代碼代碼如下:

 
var AccordionObject = new Accordion(toggles, content { 
height: true // 默認(rèn)為true 
}); 

width
默認(rèn)為false
和“height”類似，不過不是使用高度漸變動畫來顯示內(nèi)容，而是使用寬度漸變動畫來顯示內(nèi)容。如果你把“width”選項和其他我們看到的標(biāo)準(zhǔn)設(shè)置一起使用，各個標(biāo)題開關(guān)之間的距離將保持不變，這個距離完全基于內(nèi)容的高度。內(nèi)容的div將會從左到右，寬度逐漸變寬來顯示內(nèi)容。
參考代碼：

復(fù)制代碼代碼如下:

 
var AccordionObject = new Accordion(toggles, content { 
width: false // 默認(rèn)為false 
}); 

opacity
默認(rèn)為true
這個選項設(shè)置了當(dāng)你隱藏或者顯示內(nèi)容時，是否使用不透明度漸變效果。由于我們在上面使用了默認(rèn)設(shè)置，所以你可以看到效果。
參考代碼：

復(fù)制代碼代碼如下:

 
var AccordionObject = new Accordion(toggles, content { 
opacity: true // 默認(rèn)為true 
}); 

fixedHeight
默認(rèn)為false
要設(shè)置一個固定的高度，你可以在這里設(shè)置一個整數(shù)（例如，你可以設(shè)置100，從而可以使得內(nèi)容的高度為100px）。如果你準(zhǔn)備設(shè)置的高度小于內(nèi)容的高度，在這里你需要在CSS中設(shè)置一下內(nèi)容的overflow屬性。和你可能的期望一樣，當(dāng)你使用“show”選項時，當(dāng)頁面第一次載入時，它是不會生效（被注冊）的。
參考代碼：

復(fù)制代碼代碼如下:

 
var AccordionObject = new Accordion(toggles, content { 
fixedHeight: false // 默認(rèn)為false 
}); 

fixedWidth
默認(rèn)為false
和上面的“fixedHeight”類似，如果你給了這個選項一個整數(shù)，這將設(shè)置它的寬度。
參考代碼：

復(fù)制代碼代碼如下:

 
var AccordionObject = new Accordion(toggles, content { 
fixedWidth: false // 默認(rèn)為false 
}); 

alwaysHide
默認(rèn)為false
這個選項可以讓你給標(biāo)題增加一個開關(guān)。通過把這個選項設(shè)置為true，當(dāng)你點擊一個內(nèi)容已經(jīng)展開的標(biāo)題時，它將關(guān)閉這個內(nèi)容塊，但是不會展開任何元素。你馬上就可以在下面的例子中看到。
參考代碼：

復(fù)制代碼代碼如下:

 
var AccordionObject = new Accordion(toggles, content { 
alwaysHide: false // 默認(rèn)為false 
}); 

事件
onActive
當(dāng)你開關(guān)一個元素時觸發(fā)這個事件。他將會傳遞這個開關(guān)控制元素和內(nèi)容元素，還有開關(guān)狀態(tài)作為參數(shù)。
參考代碼：

復(fù)制代碼代碼如下:

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

onBackground
當(dāng)ige元素開始隱藏時觸發(fā)這個事件，它將傳遞所有其他正則關(guān)閉的元素作為參數(shù)，而不是展開的元素。
參考代碼：

復(fù)制代碼代碼如下:

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

onComplete
這是一個標(biāo)準(zhǔn)的onComplete事件。它傳遞一個包含內(nèi)容元素的變量。這里又一種更好的方式獲取這些東西，如果有人知道，可以作個記錄。
參考代碼：

復(fù)制代碼代碼如下:

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

方法
.addSection();
通過這個方法，你可以在中間添加一節(jié)（一個標(biāo)題/內(nèi)容元素對）。這個我們見過的許多其他方法一樣。首先，我們引用一個手風(fēng)琴對象，在后面加上.addSection，然后你可以調(diào)用標(biāo)題的id、內(nèi)容的id，最后給它指定一個位置——這個新元素要出現(xiàn)的位置（0是第一個位置）。
參考代碼： [復(fù)制代碼] [保存代碼]
AccordionObject.addSection('togglersID', 'elementsID', 2);
注意：當(dāng)你通過這個方式添加一節(jié)，雖然它會在索引值為2的地方顯示，但是它的真實索引應(yīng)該是最后一個索引值加1。如果你在一個數(shù)組中有5個項，然后你添加了第六個，它的索引值則為5，而不管你通過.addSection();方法把它添加在了什么地方。
.display();
這個方法可以讓你展開一個指定的元素。你可以通過它的索引值來選擇這個元素（如果你添加了一個新的元素對，你又想展開它們，你需要使用一個新的索引值）。
參考代碼：

復(fù)制代碼代碼如下:

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

實例演示
這里我們有一個全功能的手風(fēng)琴，使用了上面我們看到的所有事件和方法，還有非常多的選項。仔細(xì)閱讀下面的代碼和代碼內(nèi)相關(guān)的注釋，看看它們是怎么使用的。
參考代碼：

復(fù)制代碼代碼如下:

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

這里你可以看到事件是什么時候觸發(fā)的。
onCompleteonActiveonBackground
可以試試用下面的按鈕添加一對內(nèi)容。
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 Here is the content of toggle 1
Toggle 2
Here is the content of toggle 2
Toggle 3
Here is the content of toggle 3
Toggle 4
Here is the content of toggle 4
Toggle Add
Here is the content of toggle 4

要注意的地方
.display可以識別索引（index），不過如你使用了addSection方法，那么這一節(jié)將使用最后一個索引
如果你使用了“fixedHeight”選項，在“show”選項下不會起任何作用，但是在“display”選項下會有作用
更多手風(fēng)琴選項、事件和方法
手風(fēng)琴（Accordion）類繼承自Fx.Element類，而Fx.Element類又繼承自Fx類。你可以使用這些類的各種選項來優(yōu)化你的手風(fēng)琴（Accordion）。雖然它看起來是個很簡單的東西，但是手風(fēng)琴是一個非常有用和強大的插件。我非常樂意看到有人利用這個做出的任何效果。