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动态列功能,结合完整实例形式详细分析了jQuery基于事件响应及页面元素动态属性操作实现的动态列显示功能相关操作技巧,需要的朋友可以参考下
    2019-08-08
  • jQuery实现类似滑动门切换效果的层切换

    jQuery实现类似滑动门切换效果的层切换

    滑动门切换效果想必大家都有见到过吧,在本文为大家介绍下jQuery是如何实现层切换的
    2013-09-09
  • 基于jQuery实现仿微博发布框字数提示

    基于jQuery实现仿微博发布框字数提示

    这篇文章主要为大家详细介绍了基于jQuery实现仿微博发布框字数提示的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • Jquery promise实现一张一张加载图片

    Jquery promise实现一张一张加载图片

    通过jquery promise实现一张一张的连续图片的加载功能,当图片加载错误,超时后会显示加载图片加载失败。对jquery promise实现加载图片的相关资料感兴趣的朋友参考下
    2015-11-11
  • jquery获取select,option所有的value和text的实例

    jquery获取select,option所有的value和text的实例

    下面小编就为大家带来一篇jquery获取select,option所有的value和text的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • jQuery实现下拉框功能实例代码

    jQuery实现下拉框功能实例代码

    这篇文章主要介绍了jQuery实现下拉框功能实例代码的相关资料,需要的朋友可以参考下
    2016-05-05
  • jQuery带箭头提示框tooltips插件集锦

    jQuery带箭头提示框tooltips插件集锦

    这里给大家推荐几款比较好用实用易用的jQuery带箭头提示框tooltips插件,兼容性都很不错,大家根据需要自由选择吧
    2014-11-11
  • 用jquery实现学校的校历(asp.net+jquery ui 1.72)

    用jquery实现学校的校历(asp.net+jquery ui 1.72)

    学校日历有以下几个特点:1显示本周是本学期的第几周;2显示今日事件;3特殊显示有事件的日期,点击该日期显示本日事件。
    2010-01-01
  • jQuery使用$.ajax进行即时验证实例详解

    jQuery使用$.ajax进行即时验证实例详解

    这篇文章主要介绍了jQuery使用$.ajax进行即时验证的方法,以完整实例形式较为详细的分析了jQuery前台控制ajax交互与后台asp.net响应处理的详细实现技巧,需要的朋友可以参考下
    2015-12-12
  • jQuery生成假加载动画效果

    jQuery生成假加载动画效果

    在使用PDFObject.js时,由于后台需要转换数据,在前台显示的时候,有很长一段时间显示空白页面,所以想到写一个假的加载动画,下面看下实现代码
    2016-12-12

最新评论