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 放大镜 移动镜片效果代码
May 09 Javascript
ASP.NET中AJAX 调用实例代码
May 03 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
Async/Await替代Promise的6个理由
Jun 15 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
vue实现分页加载效果
Dec 24 Javascript
JavaScript代码简化技巧实例解析
Sep 09 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获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
php事务处理实例详解
2014/07/11 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
php图像验证码生成代码
2017/06/08 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
详解Python中的序列化与反序列化的使用
2015/06/30 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
使用python绘制二维图形示例
2019/11/22 Python
python实现FTP循环上传文件
2020/03/20 Python
python字符串的index和find的区别详解
2020/06/20 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
初中女生自我鉴定
2013/12/19 职场文书
超市开店计划书
2014/04/26 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
2014年检验科工作总结
2014/11/22 职场文书
加薪申请报告范本
2015/05/15 职场文书
社会实践单位意见
2015/06/05 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP