Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)

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

发布时间:2013-08-21   编辑:www.jquerycn.cn
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)实现代码,需要的朋友可以参考下。
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)实现代码,需要的朋友可以参考下。
复制代码 代码如下:

$(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 id="new-tab-'+tabCounter+'">'+'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--;
});
}

您可能感兴趣的文章:
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
JS悬浮移动窗口(悬浮广告)的特效代码
jQuery UI Dialog 创建友好的弹出对话框实现代码
jquery插件jbox使用iframe关闭问题
消息通知提醒插件 Pines Notify
基于jquery实现的定时显示与隐藏div广告的实现代码
artDialog双击会关闭对话框的修改过程分享
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
jQuery 右下角滑动弹出可关闭重现层完整代码

[关闭]