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 相关文章推荐
document.documentElement的一些使用技巧
Apr 18 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 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二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
python实现根据月份和日期得到星座的方法
2015/03/27 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
pyhton列表转换为数组的实例
2018/04/04 Python
Python @property装饰器原理解析
2020/01/22 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
方正Java笔试题
2014/07/03 面试题
实习单位鉴定评语
2014/04/26 职场文书
同学聚会策划方案
2014/06/06 职场文书
电力培训心得体会
2014/09/02 职场文书
公证委托书格式
2014/09/13 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
大学生考试作弊被抓检讨书
2014/12/27 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
Python实现老照片修复之上色小技巧
2021/10/16 Python