jquery UI 1.7 ui.tabs dynamic Add and close (button off + double click off)
$ (document). Ready (function () {
$ (' #tabs '). Tabs ({add:addeventhandler}); Bind addEventHandler Event to 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 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, turn off 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 Close event Binding
var li = $ (ui.tab). parent ();
var index = $ (' #tabs Li '). Index (li.get (0));
$ ("#tabs"). Tabs ("Remove", index);
tabcounter--;
});
}