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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
初试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中对2个数组相加的函数
2011/06/24 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
jquery $.trim()方法使用介绍
2014/05/21 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
Python正则表达式介绍
2012/08/06 Python
Python中List.index()方法的使用教程
2015/05/20 Python
分享Python文本生成二维码实例
2016/01/06 Python
python中logging库的使用总结
2017/10/18 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Python程序暂停的正常处理方法
2019/11/07 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
探矿工程师自荐信
2014/01/24 职场文书
六一儿童节活动策划方案
2014/01/27 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
房屋买卖协议书
2014/04/10 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
安全生产演讲稿
2014/05/09 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL