Mootools 1.2教程

Mootools 1.2 手風琴(Accordion)教程

时间:2015-07-13 19:38来源:网络整理 作者:KKWL 点击:
創建和配置一個基本的手風琴很簡單,但是你一定要認真看完全文,因為更多的高級選項可能有一些複雜。 基礎知識 創建一個新的手風琴 要創建一個新的手風琴,你需要選擇一些成對


創建和配置一個基本的手風琴很簡單,但是你一定要認真看完全文,因為更多的高級選項可能有一些複雜。
基礎知識
創建一個新的手風琴
要創建一個新的手風琴,你需要選擇一些成對的元素——包含標題和內容。因此,首先,需要給每一個標題和每一個內容塊分別指定一個css類名:
參考代碼

複製代碼 代碼如下:

<h3>Toggle 1</h3>
<p>Here is the content of toggle 1</p>
<h3>Toggle 2</h3>
<p>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
當你開關一個元素時觸發這個事件。他將會傳遞這個開關控制元素和內容元素,還有開關狀態作為參數。
參考代碼:

複製代碼 代碼如下:

------分隔线----------------------------