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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
AngularJS表单基本操作
Jan 09 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
详解react-redux插件入门
Apr 19 Javascript
vue实现五子棋游戏
May 28 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 Javascript
react实现复选框全选和反选组件效果
Aug 25 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
一个颜色轮换的简单例子
2006/10/09 PHP
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
php多文件上传下载示例分享
2014/02/20 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
手机号码,密码正则验证
2014/09/04 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
移动端js图片查看器
2016/11/17 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python实现读取并显示图片的两种方法
2017/01/13 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
学校元旦晚会方案
2014/02/19 职场文书
部队万能检讨书
2014/02/20 职场文书
三八节主持词
2014/03/17 职场文书
村级换届选举方案
2014/05/10 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
教师师德师风整改措施
2014/10/24 职场文书
党员个人总结范文
2015/02/14 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书