jqueryUI tab标签页（达到网站标签页的效果）

//

<dl class="layui-nav-child">
    <dd><a href="#" title="template/orgFrame.html"><i class="icon-det"></i>组织架构</a></dd>
    <dd><a href="#" title="template/positionManage.html"><i class="icon-det"></i>职位管理</a></dd>
    <dd><a href="#" title="template/userManage.html" ><i class="icon-det"></i>用户管理</a></dd>
    <dd><a href="#" title="template/insideNotice.html" ><i class="icon-det"></i>内部通知</a></dd>
    <dd><a href="#" title="template/newsManage.html" ><i class="icon-det"></i>新闻管理</a></dd>
    <dd><a href="#" title="template/systemLog.html" ><i class="icon-det"></i>系统日志</a></dd>
    <dd><a href="#" title="template/insideEngine.html" ><i class="icon-det"></i>内部引擎</a></dd>
</dl>

<main class="conframe">
        <div id="tabs">
            <ul id="mm">
                <li class="tabCur">
                    <a class="tabLink" href="#contant_1" rel="template/home.html" >我的首页</a>
                </li>
                <!--li><a class="tabLink" href="#contant_2" rel="template/initiateProcess.html" >流程发起</a><i class="ui-icon-close">×</i></li>
                <li><a class="tabLink" href="#contant_3" rel="template/backlog.html" >待办事项</a><i class="ui-icon-close">×</i></li-->
            </ul>
            <div  id="contant_1">
            </div>
        </div>
</main>

/
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 + '"></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+" 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);
  }

转载于:https://www.cnblogs.com/yanglife/p/7639916.html