jquery ui according詳解(中文)

來源:互聯網
上載者:User
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 )

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.