Jquery UI accordion 詳解

要使用這個插件ui.core.js和ui.accordion.js這兩個js文件是必不可少的,當然jquery文件也是必須的

 

1 選項:

1.1 active 這個參數是設置默認選項的,默認情況下是0,也就是第一個哦。哈哈。初始化設置例:$('#accordion').accordion({ active: 2 });在初始化之後的獲取和設置例://獲取 var active = $('#accordion').accordion('option', 'active');
//設置 $('#accordion').accordion('option', 'active', 2);


1.2 animated 這個參數是設置動畫效果 默認選項是‘slide’
可以設置你喜歡的動畫效果,或不使用動畫效果(設置false),除了默認設置,使用'bounceslide'和'easeslide'需要UI Effects Core 。。。嘿嘿。。。
初始化設置例: $('#accordion').accordion({ animated: 'easeslide' });
在初始化之後的獲取和設置例:
//獲取
var animated = $('#accordion').accordion('option', 'animated');
//設置
$('#accordion').accordion('option', 'animated', 'easeslide');


1.3 autoHeight 默認是true,如果設置,所有內容部分的高被設定爲其中最高內容的高。 初始化設置:$('#accordion').accordion({ autoHeight: false });
初始化以後的獲取或設置
//獲取
var autoHeight = $('#accordion').accordion('option', 'autoHeight');
//設置
$('#accordion').accordion('option', 'autoHeight', false);


1.4 clearStyle 默認是false,似乎是清除style,哈哈~~~
初始化設置 $('#accordion').accordion({ clearStyle: true });
初始化後的獲取和設置和上面的差不多。。。省略。。。


1.5 event 默認是'click' 如何展開選項。可以設置長雙擊、鼠標滑過等。。。
初始化設置例:$('#accordion').accordion(event:"mouseover");
初始化後的設置請參考上面的 ,此處省略。。。


1.6 fillSpace ,充滿父元素的高,默認爲false ,使用此項,autoHeight無效。
初始化設置例:$('#accordion').accordion({ fillSpace: true });
初始化後的獲取和設置請參考上面的 ,此處省略。。。


1.7 header,設置頭元素(見上面實例),默認值爲:'> li > :first-child,> :not(li):even'
此處省略,自己理解。。。


1.8 icon,設置小圖標,默認值爲: { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }
另外,請看下面的英國字兒~~~只可意會不可言傳。。。
Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the jQuery UI CSS Framework manipulated by jQuery UI ThemeRoller

初始化設置例:$('#accordion').accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });
初始化後的獲取和設置省略。。。


1.9 navigation 和navigationFilter暫時不知道到底是做什麼用的,回頭再說吧。。。

 

2 事件


2.1 change事件 accordion改變時觸發的事件,有兩種綁定方法
第一種:
$('#accordion').bind('accordionchange', function(event, ui) {
ui.newHeader // jQuery 對象, 激活 header
ui.oldHeader // jQuery 對象, 之前 header
ui.newContent // jQuery 對象, 激活 content
ui.oldContent // jQuery 對象, 之前 content
});這種方法在前面的例子中已經都有嘍~~
第二種:
$('#accordion').accordion({
   change: function(event, ui) { ... }
}); 看清楚了吧。哈哈。

 

3 方法


3.1 destroy :毀滅地球...
使用方法:.accordion( 'destroy' )
3.2 disable:accordion不可用,使之無效。
使用方法:.accordion('disable')
3.3 enable: 可用,使之有效,使用方法:略...
3.4 option:參數,使用方法:前面都已經用過了,例:.accordion( 'option' , optionName , [value] )
3.5 activate:也是設置默認選項,和參數active 作用一樣。例:.accordion( 'activate' , index )

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章