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改變時觸發的事件,有兩種Binder 方法
第一種:
$('#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 )