jqueryUI tab标签页代码分享


Posted in jQuery onOctober 09, 2017

本文实例为大家分享了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);
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
利用jQuery解析获取JSON数据
Apr 08 jQuery
jQuery Plupload上传插件的使用
Apr 19 jQuery
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery ajax调用webservice注意事项
Oct 08 #jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 #jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 #jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 #jQuery
jQuery选择器之子元素过滤选择器
Sep 28 #jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 #jQuery
jquery实现左右轮播图效果
Sep 28 #jQuery
You might like
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
深入理解Python中range和xrange的区别
2017/11/26 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
tensorboard显示空白的解决
2020/02/15 Python
PyQt实现计数器的方法示例
2021/01/18 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
优秀经理事迹材料
2014/02/01 职场文书
社区八一活动方案
2014/02/03 职场文书
市场部经理岗位职责
2014/04/10 职场文书
个人综合鉴定材料
2014/05/23 职场文书
门店业绩提升方案
2014/06/08 职场文书
十佳少年事迹材料
2014/12/25 职场文书
跳高加油稿
2015/07/21 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python