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

相关文章推荐

低调的鸡蛋 · 《火影忍者》中纲手姓什么？ - 知乎· 11 月前 ·

要出家的钥匙扣 · 仙女屋韩舞网 - 百度· 1 年前 ·

率性的羽毛球 · 钟落潭潮汕移民_钟落潭搬迁有什么村_钟落潭客 ...· 1 年前 ·

一身肌肉的砖头 · 陈雨菲击败中国台北选手戴资颖夺羽球女单金牌！ ...· 1 年前 ·

谈吐大方的香菜 · 风云电视剧（主要是第一部雄霸天下和必胜）与原 ...· 1 年前 ·

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 }