复制代码 代码如下:

$(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--;

});

}