jquery ui 1.7 ui.tabs dynamic addition and closing (button to close, double-click to close)_jquery

Copy code The code is as follows:

$(document).ready(function(){
$ ('#tabs').tabs({add:addEventHandler}); //Bind the addEventHandler event to the tabs block
$('#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();
$('') //Close button
.appendTo(li)
. hover(function(){
var img = $(this);
img.attr('src','close_hover2.png');
},
function(){
var img = $(this);
img.attr('src','close.png');
}
)
.click(function(){ //Close button, close Event binding
var li = $(ui.tab).parent();
var index = $('#tabs li').index(li.get(0));
$( "#tabs").tabs("remove",index);
tabCounter--;
});
$(ui.tab).dblclick(function(){ //Double-click to close event binding Define
var li = $(ui.tab).parent();
var index = $('#tabs li').index(li.get(0));
$("# tabs").tabs("remove",index);
tabCounter--;
});
}