谈谈对jquery ui tabs 的理解

2020-05-29 07:15:50易采站长站整理

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;
}
});