jquery ui tabs获取选中的实现代码

发布时间:2020-08-10编辑:脚本学堂
本篇文章介绍了,Jquery实现ui tabls获取选中的效果,有需要的朋友,可以参考下。

实现jquery ui tabs获取选中,即当jquery ui tabs选项卡初始化之后,在别的操作中,如何判断当前页面中的那个选项卡选中的是哪一项?!
需注意以下几点:
第一,获得选中的tab:var selectedTab = $(‘#tb’).tabs(‘getSelected’);
第二,获得原有属性:var titleInfo = selectedTab.panel(‘options’).title;
var contenturl = selectedTab.panel(‘options’).content;
第三,刷新原来的标签页面:$(‘#tb’).tabs(‘update’, {…….更多的详情,见下面的详细代码及其中的注释:

1、javascript代码
 

复制代码 代码示例:

function addTab(id, name, content) {
var exists = $('#tb').tabs('exists', name);
content = '<iframe id="centerFrame" scrolling="auto" frameborder="0"  src="' + content
+ '" style="width:100%;height:100%;"></iframe>';
if (exists) {
$('#tb').tabs('select', name);
//获得选中的tab
var selectedTab = $('#tb').tabs('getSelected');
//获得原有属性
var titleInfo = selectedTab.panel('options').title;
var contenturl = selectedTab.panel('options').content;
//刷新原来的标签页面
$('#tb').tabs('update', {
tab : selectedTab,
fit : true,
options : {
title : titleInfo,
content : content
}
});
} else {
$('#tb').tabs('add', {
title : name,
index : id,
iconCls : 'icon-save',
closable : true,
content : content,
tools : [ {
iconCls : 'icon-mini-refresh',
handler : function() {

}
} ]
});
}
}
 

有兴趣的朋友,可以自行测试下,看看效果如何?