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

相关文章推荐

活泼的卤蛋 · Ubuntu18.04安装mongodb ...· 1 年前 ·

低调的炒面 · 用户控件_百度百科· 1 年前 ·

慷慨大方的硬盘 · Linux 系统上最常用的定时器 - 知乎· 1 年前 ·

仗义的大象 · 使用Python+JarvisAI实现AI虚 ...· 1 年前 ·

完美的馒头 · [windows批处理脚本_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 }