|
|
基礎知識
創建一個新的手風琴
要創建一個新的手風琴，你需要選擇一些成對的元素――包含標題和內容。因此，首先，需要給每一個標題和每一個內容塊分別指定一個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
Here is the content of toggle 2
Toggle 3
Here is the content of 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是第一個位置）。
參考代碼： [復制代碼] [保存代碼]
AccordionObject.addSection('togglersID', 'elementsID', 2);
注意：當你通過這個方式添加一節，雖然它會在索引值為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);
});
這里你可以看到事件是什么時候觸發的。
onCompleteonActiveonBackground
可以試試用下面的按鈕添加一對內容。
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方法，那么這一節將使用最后一個索引
如果你使用了“fixedHeight”選項，在“show”選項下不會起任何作用，但是在“display”選項下會有作用
更多手風琴選項、事件和方法
手風琴（Accordion）類繼承自Fx.Element類，而Fx.Element類又繼承自Fx類。你可以使用這些類的各種選項來優化你的手風琴（Accordion）。雖然它看起來是個很簡單的東西，但是手風琴是一個非常有用和強大的插件。我非常樂意看到有人利用這個做出的任何效果。
更多學習
參考文檔中的accordion這一節，還有Fx.Elements和Fx這兩節。你還可以看看MooTools官方demo中的accordion的使用。
下載一個包含你開始所需要的所有東西的zip包
包括MooTools 1.2的核心庫和擴展（更多）庫，上面的示例，一個外部的JavaScript文件，一個簡單的HTML頁面和一個CSS文件。
JavaScript技術：Mootools 1.2 手風琴（Accordion）教程，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
