jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)

复制代码 代码如下:
$(document).ready(function(){
$('#tabs').tabs({add:addEventHandler}); //给tabs块绑定addEventHandler事件
$('#newtabs').click(addTab);
})
var tabCounter = 1;
function addTab(){
if(tabCounter > 6){
alert('tabs can not more than 6!');
return;
}
$('<div id="new-tab-'+tabCounter+'">'+'New tab'+tabCounter+'</div>').appendTo('#tabs');
$('#tabs').tabs("add","#new-tab-"+tabCounter,'New tab'+tabCounter);
tabCounter++;
}
function addEventHandler(event,ui){
var li = $(ui.tab).parent();
$('<img src="close.gif"/>') //关闭按钮
.appendTo(li)
.hover(function(){
var img = $(this);
img.attr('src','close_hover2.png');
},
function(){
var img = $(this);
img.attr('src','close.png');
}
)
.click(function(){ //关闭按钮,关闭事件绑定
var li = $(ui.tab).parent();
var index = $('#tabs li').index(li.get(0));
$("#tabs").tabs("remove",index);
tabCounter--;
});
$(ui.tab).dblclick(function(){ //双击关闭事件绑定
var li = $(ui.tab).parent();
var index = $('#tabs li').index(li.get(0));
$("#tabs").tabs("remove",index);
tabCounter--;
});
}

您可能感兴趣的文章:

• jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
• jquery easyui 结合jsp简单展现table数据示例
• jquery easyui的tabs使用时的问题
• jQuery EasyUI 中文API Layout(Tabs)
• jquery-easyui关闭tab自动切换到前一个tab
• jQuery EasyUI Tab 选项卡问题小结
• 基于Jquery easyui 选中特定的tab
• jQuery easyui刷新当前tabs的方法
• jQuery EasyUI 布局之动态添加tabs标签页
• jqueryUI tab标签页代码分享