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入门指导
Nov 01 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
微信小程序 JS动态修改样式的实现代码
Feb 10 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
Javascript获取某个月的天数
May 30 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 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
Search Engine Friendly的URL设计
2006/10/09 PHP
php中{}大括号是什么意思
2013/12/01 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
DOM 事件流详解
2015/01/20 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
python登录QQ邮箱发信的实现代码
2013/02/10 Python
python 简单的多线程链接实现代码
2016/08/28 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Python Flask框架扩展操作示例
2019/05/03 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
学python最电脑配置有要求么
2020/07/05 Python
Python如何给函数库增加日志功能
2020/08/04 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技