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模块化和命名空间管理的问题说明
Dec 06 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
react build 后打包发布总结
Aug 24 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 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 URL编码解码函数代码
2009/03/10 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
python 录制系统声音的示例
2020/12/21 Python
pandas按条件筛选数据的实现
2021/02/20 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
幼儿园美术教学反思
2014/01/31 职场文书
大学生操行评语大全
2014/12/31 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
vue特效之翻牌动画
2022/04/20 Vue.js