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实现跳转菜单的具体方法
Jul 05 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
Nov 17 Javascript
JavaScript构造函数详解
Dec 27 Javascript
js数组去重的hash方法
Dec 22 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
JS+canvas绘制的动态机械表动画效果
Sep 12 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
JS中准确判断变量类型的方法
Jun 01 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
PHP多线程类及用法实例
2014/12/03 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
小程序调用微信支付的方法
2019/09/26 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
毕业生幼师求职自荐信
2013/10/01 职场文书
公司新年寄语
2014/04/04 职场文书
2015党建工作简报
2015/07/21 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
php 原生分页
2021/04/01 PHP
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技