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


Posted in Javascript onApril 01, 2010
$(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--; 
}); 
}
Javascript 相关文章推荐
Javascript MD4
Dec 20 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
初试jQuery EasyUI 使用介绍
Apr 01 #Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 #Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 #Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 #Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 #Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 #Javascript
基于jQuery的弹出消息插件 DivAlert之旅(一)
Apr 01 #Javascript
You might like
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
python方法生成txt标签文件的实例代码
2018/05/10 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
思想品德课教学反思
2014/02/10 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
推荐信范文大全
2015/03/27 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server