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 相关文章推荐
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
js倒计时小程序
Nov 05 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 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
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php中{}大括号是什么意思
2013/12/01 PHP
php简单实现数组分页的方法
2016/04/30 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
JS支持带x身份证号码验证函数
2008/08/10 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
vue实现分页栏效果
2019/06/28 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
ant design实现圈选功能
2019/12/17 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
python和C语言混合编程实例
2014/06/04 Python
简单的python后台管理程序
2017/04/13 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
python调用其他文件函数或类的示例
2019/07/16 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
python重要函数eval多种用法解析
2020/01/14 Python
linux 下selenium chrome使用详解
2020/04/02 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
主要领导对照检查材料
2014/08/26 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
小学生节水倡议书
2015/04/29 职场文书
搞笑欢迎词大全
2015/09/30 职场文书