欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

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

时间:2021-06-17 09:16:29|栏目:jquery|点击:
复制代码 代码如下:

$(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实现表格无刷新分页

栏    目:jquery

下一篇:jQuery实现表格行上移下移和置顶的方法

本文标题:jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)

本文地址:http://www.codeinn.net/misctech/143169.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有