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 页面模板化很多人没有使用过的方法
Jun 05 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 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生成唯一数字id的方法汇总
2015/11/18 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
Python中装饰器高级用法详解
2017/12/25 Python
pthon贪吃蛇游戏详细代码
2019/01/27 Python
Python Django基础二之URL路由系统
2019/07/18 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
有关打架的检讨书
2014/01/25 职场文书
爱国演讲稿500字
2014/05/04 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
护士求职自荐信范文
2015/03/04 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
python requests模块的使用示例
2021/04/07 Python
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
SpringBoot使用ip2region获取地理位置信息的方法
2022/06/21 Java/Android