jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭) 【转载】(http://www.cnblogs.com/lijia7436/archive/2010/03/31/1701193.html)

1



$(document).ready(function()

{
2



$('#tabs').tabs(

{add:addEventHandler}); //给tabs块绑定addEventHandler事件
3

$('#newtabs').click(addTab);
4


5

})
6


7

var tabCounter = 1;
8



function 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

}
17



function 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

}