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 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
如何提高Dom访问速度
Jan 05 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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代码简化
2010/02/08 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
用pycharm开发django项目示例代码
2018/10/24 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python设置环境变量的作用和实例
2019/07/09 Python
Django实现文件上传下载功能
2019/10/06 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
上班上网检讨书
2014/01/29 职场文书
党员承诺书格式
2014/05/21 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript
Nginx速查手册及常见问题
2022/04/07 Servers