|
|
基礎(chǔ)知識(shí)
創(chuàng)建一個(gè)新的手風(fēng)琴
要?jiǎng)?chuàng)建一個(gè)新的手風(fēng)琴，你需要選擇一些成對(duì)的元素――包含標(biāo)題和內(nèi)容。因此，首先，需要給每一個(gè)標(biāo)題和每一個(gè)內(nèi)容塊分別指定一個(gè)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”的元素，并把它們賦值給變量，然后初始化一個(gè)手風(fēng)琴對(duì)象。
參考代碼：
復(fù)制代碼 代碼如下:
var toggles = $$('.togglers');
var content = $$('.elements');
// 創(chuàng)建你的對(duì)象變量
// 使用“new”創(chuàng)建一個(gè)新的手風(fēng)琴對(duì)象
// 設(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
選項(xiàng)
當(dāng)然，如果你想要手風(fēng)琴默認(rèn)效果以外的東西，你需要調(diào)整一下選項(xiàng)。在這里我們將逐個(gè)講解。
display
默認(rèn)為0
這個(gè)選項(xiàng)決定了當(dāng)頁(yè)面加載后哪個(gè)元素會(huì)顯示出來。默認(rèn)值為0，因此第一個(gè)元素會(huì)顯示出來。如果要設(shè)置為其他元素，只需要設(shè)置為另外一個(gè)元素的索引值（為整數(shù)）就可以了。和“show”不一樣，“display”將會(huì)使用漸變動(dòng)畫讓元素展開。
參考代碼：
復(fù)制代碼 代碼如下:
var AccordionObject = new Accordion(toggles, content {
display: 0 // 默認(rèn)為0
});
show
默認(rèn)為0
和“display”非常類似，“show”決定了當(dāng)頁(yè)面加載后那個(gè)元素將會(huì)展開，不過它沒有漸變動(dòng)畫，它只是在頁(yè)面加載后顯示出來，而不使用任何漸變動(dòng)畫。
參考代碼：
復(fù)制代碼 代碼如下:
var AccordionObject = new Accordion(toggles, content {
display: 0 // 默認(rèn)為0
});
height
默認(rèn)為true
當(dāng)設(shè)置為true，內(nèi)容顯示時(shí)，將有高度漸變動(dòng)畫效果。這和你上面看到的一樣，是一個(gè)標(biāo)準(zhǔn)的手風(fēng)琴設(shè)置。
參考代碼：
復(fù)制代碼 代碼如下:
var AccordionObject = new Accordion(toggles, content {
height: true // 默認(rèn)為true
});
width
默認(rèn)為false
和“height”類似，不過不是使用高度漸變動(dòng)畫來顯示內(nèi)容，而是使用寬度漸變動(dòng)畫來顯示內(nèi)容。如果你把“width”選項(xiàng)和其他我們看到的標(biāo)準(zhǔn)設(shè)置一起使用，各個(gè)標(biāo)題開關(guān)之間的距離將保持不變，這個(gè)距離完全基于內(nèi)容的高度。內(nèi)容的div將會(huì)從左到右，寬度逐漸變寬來顯示內(nèi)容。
參考代碼：
復(fù)制代碼 代碼如下:
var AccordionObject = new Accordion(toggles, content {
width: false // 默認(rèn)為false
});
opacity
默認(rèn)為true
這個(gè)選項(xiàng)設(shè)置了當(dāng)你隱藏或者顯示內(nèi)容時(shí)，是否使用不透明度漸變效果。由于我們?cè)谏厦媸褂昧四J(rèn)設(shè)置，所以你可以看到效果。
參考代碼：
復(fù)制代碼 代碼如下:
var AccordionObject = new Accordion(toggles, content {
opacity: true // 默認(rèn)為true
});
fixedHeight
默認(rèn)為false
要設(shè)置一個(gè)固定的高度，你可以在這里設(shè)置一個(gè)整數(shù)（例如，你可以設(shè)置100，從而可以使得內(nèi)容的高度為100px）。如果你準(zhǔn)備設(shè)置的高度小于內(nèi)容的高度，在這里你需要在CSS中設(shè)置一下內(nèi)容的overflow屬性。和你可能的期望一樣，當(dāng)你使用“show”選項(xiàng)時(shí)，當(dāng)頁(yè)面第一次載入時(shí)，它是不會(huì)生效（被注冊(cè)）的。
參考代碼：
復(fù)制代碼 代碼如下:
var AccordionObject = new Accordion(toggles, content {
fixedHeight: false // 默認(rèn)為false
});
fixedWidth
默認(rèn)為false
和上面的“fixedHeight”類似，如果你給了這個(gè)選項(xiàng)一個(gè)整數(shù)，這將設(shè)置它的寬度。
參考代碼：
復(fù)制代碼 代碼如下:
var AccordionObject = new Accordion(toggles, content {
fixedWidth: false // 默認(rèn)為false
});
alwaysHide
默認(rèn)為false
這個(gè)選項(xiàng)可以讓你給標(biāo)題增加一個(gè)開關(guān)。通過把這個(gè)選項(xiàng)設(shè)置為true，當(dāng)你點(diǎn)擊一個(gè)內(nèi)容已經(jīng)展開的標(biāo)題時(shí)，它將關(guān)閉這個(gè)內(nèi)容塊，但是不會(huì)展開任何元素。你馬上就可以在下面的例子中看到。
參考代碼：
復(fù)制代碼 代碼如下:
var AccordionObject = new Accordion(toggles, content {
alwaysHide: false // 默認(rèn)為false
});
事件
onActive
當(dāng)你開關(guān)一個(gè)元素時(shí)觸發(fā)這個(gè)事件。他將會(huì)傳遞這個(gè)開關(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元素開始隱藏時(shí)觸發(fā)這個(gè)事件，它將傳遞所有其他正則關(guān)閉的元素作為參數(shù)，而不是展開的元素。
參考代碼：
復(fù)制代碼 代碼如下:
var AccordionObject = new Accordion(toggles, content {
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); // 紅色
element.highlight('#DC4F4D');
}
});
onComplete
這是一個(gè)標(biāo)準(zhǔn)的onComplete事件。它傳遞一個(gè)包含內(nèi)容元素的變量。這里又一種更好的方式獲取這些東西，如果有人知道，可以作個(gè)記錄。
參考代碼：
復(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();
通過這個(gè)方法，你可以在中間添加一節(jié)（一個(gè)標(biāo)題/內(nèi)容元素對(duì)）。這個(gè)我們見過的許多其他方法一樣。首先，我們引用一個(gè)手風(fēng)琴對(duì)象，在后面加上.addSection，然后你可以調(diào)用標(biāo)題的id、內(nèi)容的id，最后給它指定一個(gè)位置――這個(gè)新元素要出現(xiàn)的位置（0是第一個(gè)位置）。
參考代碼： [復(fù)制代碼] [保存代碼]
AccordionObject.addSection('togglersID', 'elementsID', 2);
注意：當(dāng)你通過這個(gè)方式添加一節(jié)，雖然它會(huì)在索引值為2的地方顯示，但是它的真實(shí)索引應(yīng)該是最后一個(gè)索引值加1。如果你在一個(gè)數(shù)組中有5個(gè)項(xiàng)，然后你添加了第六個(gè)，它的索引值則為5，而不管你通過.addSection();方法把它添加在了什么地方。
.display();
這個(gè)方法可以讓你展開一個(gè)指定的元素。你可以通過它的索引值來選擇這個(gè)元素（如果你添加了一個(gè)新的元素對(duì)，你又想展開它們，你需要使用一個(gè)新的索引值）。
參考代碼：
復(fù)制代碼 代碼如下:
AccordionObject.display(5); // 這將顯示你新增加的元素
實(shí)例演示
這里我們有一個(gè)全功能的手風(fēng)琴，使用了上面我們看到的所有事件和方法，還有非常多的選項(xiàng)。仔細(xì)閱讀下面的代碼和代碼內(nèi)相關(guān)的注釋，看看它們是怎么使用的。
參考代碼：
復(fù)制代碼 代碼如下:
// 把開關(guān)元素和內(nèi)容元素賦值給兩個(gè)變量
var toggles = $$('.togglers');
var content = $$('.elements');
// 建立一個(gè)對(duì)象變量
// 使用new創(chuàng)建一個(gè)新的手風(fēng)琴對(duì)象
// 設(shè)置開關(guān)數(shù)組
// 設(shè)置內(nèi)容數(shù)組
// 設(shè)置相關(guān)選項(xiàng)和事件
var AccordionObject = new Accordion(toggles, content, {
// 當(dāng)頁(yè)面載入后
// 這將顯示（show）內(nèi)容元素（對(duì)應(yīng)索引的元素）
// 沒有任何漸變動(dòng)畫，只是展開
// 同時(shí)注意：如果你使用了“fixedHeight”，
// 當(dāng)頁(yè)面第一次載入時(shí)，show選項(xiàng)將不會(huì)起作用
// "show"選項(xiàng)會(huì)覆蓋"display"選項(xiàng)
show: 0,
// 當(dāng)頁(yè)面載入后
// 這將顯示（display）內(nèi)容元素（對(duì)應(yīng)索引的元素）
// 內(nèi)容展開時(shí)將有漸變動(dòng)畫
// 如果同時(shí)設(shè)置了display選項(xiàng)和show選項(xiàng)
// show選項(xiàng)將覆蓋display選項(xiàng)
// display: 0,
// 默認(rèn)為true
// 這將創(chuàng)建一個(gè)垂直的手風(fēng)琴
height : true,
// 這是水平手風(fēng)琴參數(shù)使用的
// 由于牽涉到CSS，這個(gè)會(huì)比較復(fù)雜
// 我們?cè)诤竺娴哪骋恢v中再講一下？
width : false,
// 默認(rèn)為true
// 這將會(huì)給內(nèi)容一個(gè)不透明度的漸變效果
opacity: true,
// 默認(rèn)為false，也可以是一個(gè)整數(shù) -
// 將固定所有內(nèi)容區(qū)塊的高度
// 需要設(shè)置css中的overflow規(guī)則
// 如果使用了"show"，在頁(yè)面第一次載入時(shí)不會(huì)生效
fixedHeight: false,
// 可以為false或者一個(gè)整數(shù)
// 和上面的fixedHeight類似，
// 不過這是針對(duì)水平手風(fēng)琴的設(shè)置
fixedWidth: false,
// 可以讓你開關(guān)一個(gè)展開的項(xiàng)
alwaysHide: true,
// 標(biāo)準(zhǔn)的onComplete事件
// 為每一個(gè)內(nèi)容塊元素傳遞一個(gè)變量
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');
},
// 這個(gè)事件將在你開關(guān)一個(gè)元素時(shí)觸發(fā)
// 將會(huì)傳遞正在打開的開關(guān)元素
// 和內(nèi)容元素
onActive: function(toggler, element) {
toggler.highlight('#76C83D'); // 綠色
element.highlight('#76C83D');
$('active').highlight('#76C83D');
},
// 這個(gè)事件將在一個(gè)元素開始隱藏時(shí)觸發(fā)
// 將會(huì)傳遞所有正在關(guān)閉的元素
// 或者沒有展開的元素
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D'); // 紅色
element.highlight('#DC4F4D');
$('background').highlight('#DC4F4D');
}
});
$('add_section').addEvent('click', function(){
// 新增加的節(jié)是成對(duì)的
// （包括開關(guān)的id和相關(guān)的內(nèi)容的id）
// 后面是它們要放置的位置的索引
AccordionObject.addSection('togglersID', 'elementsID', 0);
});
$('display_section').addEvent('click', function(){
// 將決定哪個(gè)元素在頁(yè)面第一次載入時(shí)顯示
// 將覆蓋display選項(xiàng)的設(shè)置
AccordionObject.display(4);
});
這里你可以看到事件是什么時(shí)候觸發(fā)的。
onCompleteonActiveonBackground
可以試試用下面的按鈕添加一對(duì)內(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可以識(shí)別索引（index），不過如你使用了addSection方法，那么這一節(jié)將使用最后一個(gè)索引
如果你使用了“fixedHeight”選項(xiàng)，在“show”選項(xiàng)下不會(huì)起任何作用，但是在“display”選項(xiàng)下會(huì)有作用
更多手風(fēng)琴選項(xiàng)、事件和方法
手風(fēng)琴（Accordion）類繼承自Fx.Element類，而Fx.Element類又繼承自Fx類。你可以使用這些類的各種選項(xiàng)來優(yōu)化你的手風(fēng)琴（Accordion）。雖然它看起來是個(gè)很簡(jiǎn)單的東西，但是手風(fēng)琴是一個(gè)非常有用和強(qiáng)大的插件。我非常樂意看到有人利用這個(gè)做出的任何效果。
更多學(xué)習(xí)
參考文檔中的accordion這一節(jié)，還有Fx.Elements和Fx這兩節(jié)。你還可以看看MooTools官方demo中的accordion的使用。
下載一個(gè)包含你開始所需要的所有東西的zip包
包括MooTools 1.2的核心庫(kù)和擴(kuò)展（更多）庫(kù)，上面的示例，一個(gè)外部的JavaScript文件，一個(gè)簡(jiǎn)單的HTML頁(yè)面和一個(gè)CSS文件。
JavaScript技術(shù)：Mootools 1.2 手風(fēng)琴（Accordion）教程，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
