jquery

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > jquery > jquery ui 动态添加与关闭

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--;
});
}
您可能感兴趣的文章:
阅读全文