jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭) 【转载】

1$(document).ready(function(){
 2      $('#tabs').tabs({add:addEventHandler});  //给tabs块绑定addEventHandler事件
 3      $('#newtabs').click(addTab);
 4
 5})
 6
 7var tabCounter = 1;        
 8function addTab(){
 9    if(tabCounter > 6){
10        alert('tabs can not more than 6!');
11        return;
12    }
13    $('<div id="new-tab-'+tabCounter+'">'+'New tab'+tabCounter+'</div>').appendTo('#tabs');
14    $('#tabs').tabs("add","#new-tab-"+tabCounter,'New tab'+tabCounter);
15    tabCounter++;
16}
17function addEventHandler(event,ui){
18    var li = $(ui.tab).parent();
19    $('<img src="close.gif"/>') //关闭按钮
20        .appendTo(li)
21        .hover(function(){
22                var img = $(this);
23                img.attr('src','close_hover2.png');
24            },
25            function(){
26                var img = $(this);
27                img.attr('src','close.png');
28            }
29        )
30        .click(function(){        //关闭按钮,关闭事件绑定
31            var li = $(ui.tab).parent();
32      var index = $('#tabs li').index(li.get(0));
33      $("#tabs").tabs("remove",index);
34      tabCounter--;
35        });
36        $(ui.tab).dblclick(function(){   //双击关闭事件绑定
37            var li = $(ui.tab).parent();
38      var index = $('#tabs li').index(li.get(0));
39      $("#tabs").tabs("remove",index);
40      tabCounter--;
41        });
42}