本文主要为大家分享了jqueryui tab标签页代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
var temp=1;
var arr=["我的首页"];
//×号点击关闭li
$("#tabs").delegate( ".ui-icon-close", "click", function() {
var panelid = $( this ).closest( "li" ).remove().attr( "aria-controls" );
var val= $( this ).closest( "li" ).children("a").text();
for( i=0;i<arr.length;i++){
if(arr[i] == val) {
arr.splice(i, 1);
break;
}
}
// alert(paneiid);
$( "#" +panelid ).remove();
$("#tabs").tabs( "refresh" );
// $("#tabs").tabs("option","active",$("#tabs").find(hre).index()-1);
if($( "#" +panelid).parent.attr("tabindex")=="0"){
$("#tabs").tabs("option","active",$( "#" +panelid).index()-1);
}
});
$("#tabs").bind( "keyup", function( event ) {
if ( event.altkey && event.keycode === $.ui.keycode.backspace ) {
var panelid = $("#tabs").find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
$( panelid ).remove();
// alert(456);
$("#tabs").tabs( "refresh" );
}
});
//加入iframe
$("#tabs").tabs();
function getselectedtabindex() {
return $("#tabs").tabs('option', 'active');
}
//get tab contents and load frame
begintab = $("#tabs ul li:eq(" + getselectedtabindex() + ")").find("a");
loadtabframe($(begintab).attr("href"),$(begintab).attr("rel"));
//页签切换
$("#mm").on('click','a',function(){
loadtabframe($(this).attr("href"),$(this).attr("rel"));
})
function loadtabframe(tab, url) {
if ($(tab).find("iframe").length == 0) {
var html = [];
html.push('<p class="tabiframewrapper">');
html.push('<p class="openout"><a href="' + url + '" rel="external nofollow" ></a></p><iframe class="iframetab" src="' + url + '">load failed?</iframe>');
html.push('</p>');
$(tab).append(html.join(""));
$(tab).find("iframe").height($(window).height()-80);
}
return false;
}
//点击左边按钮后，创建tab
$(".layui-nav-child").on('click','dd',function(){
var tab_name=$(this).text();
var title_1=$(this).children("a").attr("title");
//未创建过，则创建标签
if(arr.indexof(tab_name)==-1){
arr.push(tab_name);
var link_url= $(this).children("a").attr("title");
temp++;
addtab(tab_name,link_url,temp);
}
//创建了，则跳转到已存的标签页
else{
$("#mm li a").each(function(i,val){
if($(this).attr("rel")==title_1){
var jjjj=$(this).attr("href");
$("#tabs").tabs("option","active", $(jjjj).index()-1);
loadtabframe(jjjj,title_1);
return false;
}
});
}
});
//创建标签
function addtab(name,url,temp1){
var hre="#contant_"+ temp1;
var hre1="contant_"+ temp1;
//var li="<li><a class='tablink' href="+url+" rel="external nofollow" target='conframe'>"+name+"</a><i class='icon-closea'>×</i></li>";
var li="<li><a class='tablink' href='"+hre+"' rel='"+url+"'>"+name+"</a><i class=\"ui-icon-close\">×</i></li>";
//alert(li);
// $(li).appendto(".m-tablist").addclass('tabcur').siblings('li').removeclass('tabcur');
var p="<p id='"+hre1+"'></p>";
$("#tabs" ).find( ".ui-tabs-nav" ).append( li );
// var panelid = $( this ).closest( "li" ).attr( "aria-controls" );
$("#tabs").append(p);
$("#tabs").tabs("refresh");
$("#tabs").tabs("option","active",$("#tabs").find(hre).index()-1);
loadtabframe(hre,url);
}
相关推荐：
jquery tab标签页的制作_jquery
jquery学习笔记 实现图片翻转效果和tab标签切换效果_jquery
一个tab标签切换效果代码_extjs
以上就是jqueryui tab标签实例详解的详细内容。