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 14 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
JavaScript手写数组的常用函数总结
Nov 22 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 正则表达式的学习探讨
2013/06/06 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
python Socket之客户端和服务端握手详解
2017/09/18 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
对python的输出和输出格式详解
2018/12/08 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
求职者简历中的自我评价
2013/10/20 职场文书
创先争优承诺书范文
2014/03/31 职场文书
个人考核材料
2014/05/15 职场文书
公司授权委托书样本
2014/09/15 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
迁户口计划生育证明
2014/10/19 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android