需求:
1、tabs默认只有一个页签,但是需要点击某按钮,动态添加页签(添加多个)
2、tabs动态添加页签后,需要跳转到新添加的页签
查找tabs api以及tabs的源码后,发现tabs没有直接实现这两个功能的方法 附上一文化tabs api链接:http://www.css88.com/jquery-ui-api/tabs/
最后通过查看tabs的页签添加规则后,自己实现动态添加和跳转。
tabs添加的页签都是在class属性值为ui-tabs-nav下的ui标签下,页签头都是li标签
找到规则后,那么动态添加页签就容易了。
请看代码:
var tabs = $( "#tabs" ).tabs();
tabs.find( ".ui-tabs-nav" ).append( "<li id='add_tab' ><a href='#tabs-2'>页签1</a></li>" );
tabs.tabs( "refresh" );
注意tabs的refresh方法,必须要刷新一下,新添加的页签才会生效。
下面解决跳转新页签问题:
tabs也没有提供获取所有页签的方法,所以还得自己想办法获取所有的页签,再来比较。
查看tabs生成的html发现,tabs生成的li标签有个aria-controls属性,这个属性的值就是我们自定义的页签名(tabs-2)
请看代码:
var lies = tabs.find( ".ui-tabs-nav li" );
for(var i = 0; i < lies.length; i++){
if($(lies[i]).attr("aria-controls") == 'tabs-2'){
$( "#tabs" ).tabs( "option", "active", i );
}
}
动态添加的页签下具体内容,需要预先定义好并隐藏。
ok,就这么愉快的解决了。
下面附上一个完整的tabs例子,例了与上面动态添加不相关:
HTML:
<div id="tabs">
<ul>
<li><a href="#tabs-1">基本信息</a></li>
<li><a href="#tabs-2">扩展内容</a></li>
</ul>
<div id="tabs-1" style="width:97%;overflow-y:auto;margin: 0 auto;height: 95%;">基本信息</div>
<div id="tabs-2" style="width:97%;overflow-y:auto;margin: 0 auto;height: 95%;">扩展内容</div>
</div>
JS:
$( "#tabs" ).tabs({
beforeActivate: function( event, ui ) {
var id = ui.newPanel[0].id;
if(id == "tabs-1"){
// 跳转到基本信息页签时触发
}
if(id == "tabs-2"){
// 跳转到扩展内容页签时触发
}
}
});