Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 18:30:30
original
1233 Les gens l'ont consulté
复制代码 代码如下:

$(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;
}
$('
'+'New tab'+tabCounter+'
').appendTo('#tabs');
$('#tabs').tabs("add","#new-tab-"+tabCounter,'New tab'+tabCounter);
tabCounter++;
}
function addEventHandler(event,ui){
var li = $(ui.tab).parent();
$('jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)_jquery') //关闭按钮
.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--;
});
}
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal