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

y_y_y_ya

y_y_y_ya

2016-02-19 13:33

下面图老师小编跟大家分享jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭),一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

代码如下:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
$(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'+'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--;
});
}
展开更多 50%)
分享

猜你喜欢

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

Web开发
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)

jQuery ui 1.7更新小结

Web开发
jQuery ui 1.7更新小结

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Win8 Modern UI关闭方法

windows系统
Win8 Modern UI关闭方法

为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能

Web开发
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

如何快速关闭Win8 Modern UI应用

电脑入门
如何快速关闭Win8 Modern UI应用

去掉窗体的关闭按钮

编程语言 网络编程
去掉窗体的关闭按钮

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

jQuery入门第一课 jQuery选择符

jQuery入门第一课 jQuery选择符

文件系统控件的使用

文件系统控件的使用
下拉加载更多内容 ↓