jquery ui 點此下載,也可以到官網查看文件幫助。
1 屬性
1.11 ajaxOptions,當選項卡載入內容時,新增一個ajax選項。只有ajax時,新增的ajax選項才會起作用。預設值為null。上面的例子中,加入了beforeSend和success兩個選項。 ajax還有一些選項請參考jquery ajax,這裡不做詳解。 。 。
1.12 初始化設定例:請注意,$('.selector')是tabs 的類別名,在本例中.selector=#tabs,以後不再說明。
$('.selector').tabs({ ajaxOptions: { async: false } });//這裡是將非同步改為同步。
1.13 初始化後的參數獲取和設置:請注意:getter為獲取,發音:蓋特兒,setter為設置,發音:塞特兒,以後不再說明。
//getter var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions'); //setter $('.selector').tabs('option', 'ajaxOptions', { async: false });
1.21 cache 預設為false,無快取。這個選項用於ajax調用,簡單的說無緩存,就是每次發送請求都刷新;有緩存就是第一次請求刷新,以後就不刷新了,關閉頁面是另外一回事。
ajaxOptions:{cache:false}應該要跟這個功能是一樣的吧。
1.22 初始化設定例:
2.23 初始化後的參數取得與設定:
//getter var cache = $('.selector').tabs('option', 'cache'); //setter $('.selector').tabs('option', 'cache', true);
1.31collapsible,意思是可折疊的,預設選項是false,不可以折疊。如果設定為true,允許使用者將已經選取的選項卡內容折疊起來。這樣說:點擊一次選項卡2,選項卡2內容顯示出來了,這時候再次點擊選項卡2,選項卡的內容區就收了起來,再次點擊選項卡2,選項卡的內容區則又展開了。明白否?知道你不明白,不明白就用最上面的例子試試看。
1.32 初始化設定例:
1.33 初始化後的參數取得與設定:請參考1.23...
1.41 cookie 預設值為null,需要cookie外掛程式。將最後一次選擇的選項卡儲存到cookie 中。可用的選項範例:(example): { expires: 7, path: '/', domain: 'jquery.com', secure: true }.
1.42 初始化設定例:$('.selector').tabs({ cookie: { expires: 30 } });
1.43 初始化後的參數取得與設定:請參考1.23...
1.51deselectable 預設為false,作用似乎和collapsible一樣。
1.61 disabled 設定哪些選項卡不可用,是一個陣列例[0,1,2],也就是第一個、第二個、第三個選項卡。預設為[]。
1.62 初始化設定例:$('.selector').tabs({ disabled: [1, 2] });
1.63 初始化後的參數取得與設定:請參考1.23...
1.71 event ,切換選項卡的事件,預設為'click',點選切換選項卡。
1.72 初始化設定例:$('.selector').tabs({ event: 'mouseover' }); //滑鼠滑過切換選項卡
1.73 初始化後的參數取得與設定:請參考1.23...
1.81 fx,切換選項卡時的動畫效果,預設為:null,無動畫效果,
1.82 初始化設定:請參考最上面的範例。
1.83 初始化後的參數取得與設定:請參考1.23...
1.91 idPrefix ,在使用ajax時,idPrefix選項可以為其添加一個唯一的id,預設為:'ui-tabs-' 。
1.92 初始化設定例:$('.selector').tabs({ idPrefix: 'ui-tabs-primary' });
1.93 初始化後的參數取得與設定:請參考1.23...
1.101 selected,初始化時,哪個選項卡被選中,預設為0,就是第一個選項卡被選中。
1.102 初始化設定例:$('.selector').tabs({ selected: 3 });
1.103 初始化後的參數取得與設定:請參考1.23...
1.111 spinner,當遠端內容載入的時候,(ajax),spinner字串的html內容將會顯示在選項卡的標題上。 (我很奇怪,我自己試了,怎麼不起作用?)
1.112 初始化設定例:$('.selector').tabs({ spinner: 'Retrieving data...' });
1.113 初始化後的參數取得與設定:請參考1.23...
1.121 panelTemplate ,
1.131 tabTemplate ,
2 事件
先給一個事件綁定的例子,請注意:
$('#example').bind('tabsselect', function(event, ui) { ui.tab // 被选中(点击后)的选项卡元素 ui.panel //这个元素包含被选中(点击后)的选项卡的内容 ui.index //返回一个被选中(或点击后)选项卡的索引值(从0开始) });
2.11 select 类型:tabsselect ,点击选项卡时触发该事件。
2.12 初始化时绑定事件:
$('.selector').tabs({ select: function(event, ui) { ... } });
2.13 在初始化后使用事件绑定绑定该事件:
$('.selector').bind('tabsselect', function(event, ui) { ... });
2.21 load,类型:tabsload 一个远程(ajax)选项卡的内容被加载完成后触发该事件。
2.22 参考2.12
2.23 参考2.13
2.31 show,类型:tabsshow 当选项卡显示后触发该事件。
2.41 add,类型:tabsadd ,当一个选项卡被添加后触发。
2.51 remove ,类型tabsremove ,当一个选项卡被删除后触发。
2.61 enable ,类型tabsenable ,当一个选项卡可用时触发。
2.71 disable,类型tabsdisable,当一个选项卡不可用时触发。
3 方法
3.11 destroy,哈哈,又到了我最喜欢的摧毁地球时间。例:.tabs( 'destroy' )
3.21 disable,整个选项卡不可用。
3.31 enable,整个选项卡可用。.tabs( 'enable' )
3.41 option,设置属性。例:.tabs( 'option' , optionName , [value] )
3.51 add,remove,添加、删除选项卡。例:.tabs( 'add' , url , label , [index] ) ,.tabs( 'remove' , index )
3.61 enable,设置某个选项卡标签可用。例:.tabs( 'enable' , index )
3.71 disable,设置某个选项卡标签不可用。例:.tabs( 'disable' , index )
3.81 select,选择一个选项卡标签。例:.tabs( 'select' , index ) ,index从0开始。
3.91 load,重载一个ajax选项卡的内容,这个一直载入远程内容,即使cache设置为true,第二个参数是要重载选项卡的索引值。
例:.tabs( 'load' , index )
3.101 url,当一个ajax选项卡将要加载时,改变url。.tabs( 'url' , index , url )
3.111 abort,中止所有运行在tab标签上的ajax请求或动画。.tabs( 'abort' )
3.121 rotate, 自动翻滚选项卡标签。.tabs('rotate',ms,[countinue]),第二个参数是毫秒,是两个标签自动翻滚所需要的时间,设为0或null为停止翻滚。第三个参数是设置当用户选择一个
选项卡标签后是否继续翻滚,默认为:false,不继续。
真累,歇歇再说吧。。。
4 技巧
4.1 如何接收已选中选项卡标签的索引值?
例:
var $tabs = $('#example').tabs(); var selected = $tabs.tabs('option', 'selected'); // => 0
4.2 如何用一个其它元素代替选项卡单击事件来切换选项卡?
例:
var $tabs = $('#example').tabs(); // 第一个标签被选中 $('#my-text-link').click(function() { // 绑定单击事件 $tabs.tabs('select', 2); // 切换到第三个选项卡标签 return false; });
4.3 如何立刻选择刚添加的选项卡标签?
例:
var $tabs = $('#example').tabs({ add: function(event, ui) { $tabs.tabs('select', '#' + ui.panel.id); } });
4.4 如何在一个新窗口中打开选项卡标签?
例:$('#example').tabs({
select: function(event, ui) { location.href = $.data(ui.tab, 'load.tabs'); return false; } });