jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)

2016-02-19 13:33 54 1 收藏

下面图老师小编跟大家分享jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭),一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

【 tulaoshi.com - Web开发 】

代码如下:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)
$(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'+'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--;
});
}

来源:http://www.tulaoshi.com/n/20160219/1604635.html

延伸阅读
手机QQ如何关闭好友动态   1)首先打开手机QQ,在界面点击,选择你要屏蔽的好友点击进入,点击右上方。   2)点击,点击打开即该好友的动态将不再显示。  
标签: Web开发
点击添加 动态添加两个文本框: 分别表示x和y的值,点击取消 删除本行的2个文本框 记得要引入jquery.js 代码如下: script type="text/javascript" src="js/jquery.js"/script script type="text/javascript" $(function() { $("#btnMian").click(function() { //生成 0 到100000 随机数 Mapth.random产生 0到1的随机数 然后乘以10000...
标签: Web开发
此按钮调用close方法关闭,弹出窗口,没有办法关闭,因为close方法需要以个参数,参数应该是那个iframe但是将其传入并不生效,不知道为什么在网上查找也没有找到解决方案。。 最后只好自己改其源码,在其close方法第一句中增加以下代码: if(box==undefined){ box=jBox.boxes[0]; } 然后用:window.parent.window.jBox.close();调用此方法...
jquery-ui怎样制作折叠菜单 1、引入 jquery 和 jquery-ui 文件 注 jquery-ui 要放在jquery引入之后。因为要引入自己的外部样式文件和脚本文件,以下是我的head部分代码。 2、写面板布局 使用一个div来包裹我们的面板,这里给他一个id ="panel",h2是我们点击时面板伸缩和折叠,h2下方的div是当点击h2时面...

经验教程

664

收藏

35
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部