搜尋

隨機推薦

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.ElementsFx這兩節。你還可以看看MooTools官方demo中的accordion的使用

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

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

 

Mootools 教學列表:

 

廣告

无觅相关文章插件,快速提升流量

Please publish modules in offcanvas position.