jqueryUI tab标签页代码分享
时间:2019-04-07
本文章向大家介绍jqueryUI tab标签页代码分享,主要包括jqueryUI tab标签页代码分享使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了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('<div class="tabIframeWrapper">'); html.push('<div class="openout"><a href="' + url + '" rel="external nofollow" ></a></div><iframe class="iframetab" src="' + url + '">Load Failed?</iframe>'); html.push('</div>'); $(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 div="<div id='"+hre1+"'></div>"; $("#tabs" ).find( ".ui-tabs-nav" ).append( li ); // var panelId = $( this ).closest( "li" ).attr( "aria-controls" ); $("#tabs").append(div); $("#tabs").tabs("refresh"); $("#tabs").tabs("option","active",$("#tabs").find(hre).index()-1); loadTabFrame(hre,url); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 利用反转函数确定回文串
- Codeforces Round #618 (Div. 2)
- Educational Codeforces Round 82 (Rated for Div. 2)
- [C# 开发技巧]如何防止程序多次运行
- 问题 1117: K-进制数
- Java 11 新垃圾回收器 ZGC
- Red and Black(DFS 深搜练习)
- Codeforces Round #619 (Div. 2)
- 问题 1255: [蓝桥杯][算法提高]能量项链
- C# 开发技巧]如何防止程序多次运行 线程 进程
- 问题 1433: [蓝桥杯][2013年第四届真题]危险系数
- C# dev GridControl绑定数据不能显示
- Codeforces Round #621 (Div. 1 + Div. 2)(无比自闭的一夜)
- 牛客小白月赛22 A~~J
- P1914 小书童——密码