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; } $('<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--; }); }