复制代码 代码如下: $(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--; }); }

　　推荐阅读

　　JQuery 选项卡效果(JS与HTML的分离)

在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。 Javascript（jquery）代码如下： 复制代码 代码如下>>>详细阅读

本文标题：jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)

地址：http://www.17bianji.com/kaifa2/JS/26726.html

 1/2    1