【www.gdgbn.com--jquery】

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;
}
$(""+"New tab"+tabCounter+"").appendTo("#tabs");
$("#tabs").tabs("add","#new-tab-"+tabCounter,"New tab"+tabCounter);
tabCounter++;
}
function addEventHandler(event,ui){
var li = $(ui.tab).parent();
$("") //关闭按钮
.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--;
});
}

本文来源:http://www.gdgbn.com/wangyezhizuo/23958/