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

 更新时间:2010年04月01日 23:51:44   作者:  
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文本框中的事件应用以输入邮箱为例

    jquery文本框中的事件应用以输入邮箱为例

    这篇文章主要介绍了jquery文本框中的事件应用以输入邮箱为例,需要的朋友可以参考下
    2014-05-05
  • addEventListener—jQuery的事件监听方法

    addEventListener—jQuery的事件监听方法

    在Javascript中,事件监听是非常重要的,通过事件监听,我们可以在用户执行某些操作时触发相应的处理程序。最初,Javascript监听事件的方式是addEvent。addEvent()比较麻烦,所以jQuery为我们提供了一个更为便捷的事件监听方法:addEventListener。
    2023-06-06
  • jQuery检测滚动条是否到达底部

    jQuery检测滚动条是否到达底部

    这篇文章主要介绍了jQuery检测滚动条是否到达底部的实现方法,文中介绍了两种检测滚动条到达底部的状况,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • jQuery事件blur()方法的使用实例讲解

    jQuery事件blur()方法的使用实例讲解

    今天小编就为大家分享一篇关于jQuery事件blur()方法的使用实例讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-03-03
  • jQuery Validate验证框架经典大全

    jQuery Validate验证框架经典大全

    本文是脚本之家小编给大家分享的jquery validate验证框架大全,本文内容讲的非常详细,感兴趣的朋友一起看看吧
    2015-09-09
  • 如何解决jQuery EasyUI 已打开Tab重新加载问题

    如何解决jQuery EasyUI 已打开Tab重新加载问题

    最近在项目中遇到这样的需求,要求实现点击左侧已经打开的tab可以刷新重新加载datagrid。下面给大家分享实现代码,一起看看吧
    2016-12-12
  • 使用jquery实现的循环连续可停顿滚动实例

    使用jquery实现的循环连续可停顿滚动实例

    下面小编就为大家带来一篇使用jquery实现的循环连续可停顿滚动实例。
    2016-11-11
  • jquery实现的仿天猫侧导航tab切换效果

    jquery实现的仿天猫侧导航tab切换效果

    这篇文章主要介绍了jquery实现的仿天猫侧导航tab切换效果,涉及jquery鼠标事件及链式操作实现页面元素样式遍历切换效果的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • JQUERY实现左侧TIPS滑进滑出效果示例

    JQUERY实现左侧TIPS滑进滑出效果示例

    左侧提示滑进滑出的平滑效果使用jQuery实现,具体代码及截图如下,感兴趣的朋友可以参考下哈,希望对大家学习jquery有所帮助
    2013-06-06
  • JQuery的ajax基础上的超强GridView展示

    JQuery的ajax基础上的超强GridView展示

    前面有个例子是使用jQuery的datatable插件来实现的能够展开个详细信息表的样子。事实上.net的数据展示模式很好,如果配上jQuery的那些效果和AJAX功能是相当得不错。
    2009-09-09

最新评论