Jquery ui 1.7 ui. tabs dynamic addition and closure (Button close + double-click Close)

Copy codeThe 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;
}
$ ('<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 ();
$ ('') // close the 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 to 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
Var li = $ (ui. tab). parent ();
Var index = $ ('# tabs li'). index (li. get (0 ));
$ ("# Tabs"). tabs ("remove", index );
TabCounter --;
});
}