layui 手把手教你实现多页签打开页面

Posted 2021-09-03 洛阳醉长安行

在项目需求中打开的模块页面总是在一个总视图中去显示，其实在用户体验中不算太好，因为用户在A页面操作时可能需要同时去查看B页面，并且在切换页面的时候页面会进行重新加载，比较耗时、耗性能。所以在页面比较多的系统中实现多页签模式的体验还是比较好的。那么在传统的layui+jq项目中，如何实现无限页签tab式打开页面呢？废话不多说，现在就开始撸代码。

首先监听菜单按钮在点击时使用layui的element去动态添加tab（增加tab的时候先删除对应已存在的tab，防止重复），并且在tab中加入iframe（高度自动撑大），iframe中的reportName是对应页面所在的文件夹名同时也是菜单按钮的id，是一一对应的关系：

  var element = layui.element;
  $(".report-list > ul li").on("click", function () {
    //事件代理点击

    var crrentTabName = $(".layui-tab.active").attr("lay-filter");
    var reportName = $(this).data("id");

    //点击后新增tab
    element.tabDelete(crrentTabName, reportName);
    element.tabAdd(crrentTabName, {
      title: $(this).find(".title").text(),
      content:
        \'<iframe id="Iframe" src="./\' +
        reportName +
        \'/index.html"  .body-main").height() -
        50) +
        \'" scrolling="no" margin margin></iframe>\', //支持传入html
      id: reportName,
    });
    element.tabChange(crrentTabName, reportName);

然后是需要对左边菜单做一个选中效果（用户知道当前在哪个菜单）和一个折叠（用户可以更宽的查看内容）
使用本地存储记录当前所处的菜单，再次进入后就会默认跳转到这个菜单，如果初始进来默认第一个，这里是UserManage
完整js代码
menu.js

layui.use(["element", "layer"], function () {
  var element = layui.element;
  $(".report-list > ul li").on("click", function () {
    //事件代理点击

    var crrentTabName = $(".layui-tab.active").attr("lay-filter");
    var reportName = $(this).data("id");

    //点击后新增tab
    element.tabDelete(crrentTabName, reportName);
    element.tabAdd(crrentTabName, {
      title: $(this).find(".title").text(),
      content:
        \'<iframe id="Iframe" src="./\' +
        reportName +
        \'/index.html"  .body-main").height() -
        50) +
        \'" scrolling="no" margin margin></iframe>\', //支持传入html
      id: reportName,
    });
    element.tabChange(crrentTabName, reportName);
    console.log($(".body-main").height());
      // $("#Iframe").height();
  });
});

$(function () {
  //左侧导航点击高亮
  var $nav_item = $(".layui-nav-tree > .layui-nav-item");
  $nav_item.click(function () {
    $nav_item.removeClass("layui-this");
    $(this).addClass("layui-this");
  });
  changeTab = function (tabid) {
    //菜单选中效果
    $(".layui-tab").removeClass("active");
    $(\'[lay-filter="\' + tabid + \'"]\').addClass("active");
    sessionStorage.setItem("className", tabid);
    // var ss = window.location.href.indexOf("/html/");
    // var aa = window.location.href.substr(0, ss + 6);
    // url = aa + url;
    // document.getElementById("Iframe").src = url;
    // alert($(".body-main").height());
    //   $(".layui-tab-content").height($(".body-main").height());
  };
  //菜单折叠按钮效果
  $(".left-button").click(function () {
    if ($(this).hasClass("layui-icon-left")) {
      $(this).removeClass("layui-icon-left").addClass("layui-icon-right");
      $(".body-left").hide();
      $(".body-main").css("width", "100%");
    } else {
      $(this).removeClass("layui-icon-right").addClass("layui-icon-left");
      $(".body-left").show();
      $(".body-main").css("width", "calc(100% - 230px)");
    }
  });


    window.changeUrl = function (url, className) {
      console.log(className);

      console.log(url);
      //匹配url第一个路径字符用于在一级菜单高亮
      $("#main-menu > li").removeClass("selected");
      $("#main-menu > ." + url.split("/")[0] + "_1").addClass("selected");


      // sessionStorage.setItem("url", url);
      sessionStorage.setItem("className", className);

      var ss = window.location.href.indexOf("/html/");
      var aa = window.location.href.substr(0, ss + 6);
      url = aa + url.split("/")[0];
      console.log(url);
      document.getElementById("Iframe") &&
        (document.getElementById("Iframe").src =
          url + "/" + className + "/index.html");
    };
    if (
      sessionStorage.getItem("className") !== "null" &&
      $("." + sessionStorage.getItem("className")).length > 0
    ) {//记忆上次停留菜单
      $("." + sessionStorage.getItem("className")).addClass("layui-this");
      if (sessionStorage.getItem("url")) {
        changeUrl(
          sessionStorage.getItem("url"),
          sessionStorage.getItem("className")
        );
      }
    } else {
       changeUrl(sessionStorage.getItem("url"), "UserManage");
      //如上次菜单不匹配则默认第一个选中
      $(".layui-nav > .layui-nav-item:first-child").addClass("layui-this");
   
    }

  });

下面是html结构，使用的是layui的导航组件，右侧就默认展示一个菜单（无法关闭的列表tab）

<body>

  <div class="body-left">
    <div class="left-nav">
      <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="left-nav" style="margin-right: 10px;">
        <li class="layui-nav-item  workOrderTab "><a href="#" onclick="changeTab(\'workOrderTab\')">报表1</a></li>
        <li class="layui-nav-item callCenterTab"><a href="#" onclick="changeTab(\'callCenterTab\')">报表2</a></li>
      </ul>
    </div>
 
  </div>
     <div class="left-button layui-icon layui-icon-left" ></div>
  <div class="body-main">

<div class="layui-tab active" lay-filter="workOrderTab" lay-allowClose="true" >
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="default">报表</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      <div class="report-list">
        <ul>
          <li  data-id=\'WorkOrderDetail\'>
            <div class="item" >
            <div class="title">报表1</div>
            <div class="desc">一个描述</div>
          </div>
        </li>
           <li data-id=\'WorkOrderSource\' >
            <div class="item">
            <div class="title">报表yyyy</div>
            <div class="desc">一个描述</div>
          </div>
        </li>
         <li data-id=\'WorkOrderClassify\' >
            <div class="item">
            <div class="title">分类报表</div>
            <div class="desc">一个描述</div>
          </div>
        </li>
        </ul>
    </div>
  </div>
</div>


  </div>




<div class="layui-tab" lay-filter="callCenterTab" lay-allowClose="true" >
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="default"> 报表222</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      <div class="report-list">
        <ul>
          <li data-id=\'callCenterConnectionRate\'>
            <div class="item" >
            <div class="title">报表xxx</div>
            <div class="desc">展示不同的报表</div>
          </div>
        </li>
          <li data-id=\'CallRecordsData\'>
            <div class="item" >
            <div class="title">记录详情</div>
            <div class="desc">展示不同条件下的报表</div>
          </div>
        </li>
        <li data-id=\'AfterSaleTimeRate\'>
            <div class="item" >
            <div class="title">状态</div>
            <div class="desc">报表描述</div>
          </div>
        </li> 
      
        </ul>
    </div>
  </div>
</div>
  </div>

</body>

css部分:

  body{
    padding: 0;
  }
  .out{
    display: none;
  }
  .body-main{
      width: 100%;
      height: 100%;
  }
  .body-main iframe {
      background-color: #fff;
      border: 0px;

  }
  .left-nav{
    background: #fff;
  
  }
  .layui-nav .layui-nav-item a{
    background: transparent;
    color: #3b3a3a;
  }
  .layui-nav{
    
    background: #fbfbfb00;
  }
  .layui-nav-tree .layui-nav-item a:hover{
    background-color: #297acc;
  }
  .layui-nav-tree .layui-this a{
    background-color: #297acc !important;
    color:#fff ;
  }
  .body-left{
      width: 200px;
    overflow-x: hidden;
   border-right: 10px solid #eaf4ff;
  }
.body-main{
width: calc(100% - 230px);
float: left;
}




.layui-tab{
    display: none;
  }
  .layui-tab.active{
    display: block;
  }
  .headTab.layui-tab-title .layui-this {
    color: #3193f5;
}
.layui-tab {
margin: 0;
}

.left-button {
    text-align: center;
    left:180px;
    top: calc(50% - 40px);
    color: #fff;
    width: 20px;
    height: 40px;
    background: rgba(90, 169, 247, .9);
    border-radius: 4px 0 0 4px;
    line-height: 40px;
    position: absolute;
    cursor: pointer;
    z-index: 99;
}

.left-button.layui-icon-right{
  left: 0;
  border-radius: 0px 4px 4px 0px;
}
.menu-authority-control{
  display: none;
 }
 

.layui-tab-title>li:first-child .layui-tab-close {
    display: none;
}
  .report-list{
    padding: 20px;
  }
   .report-list > ul > li{
     cursor: pointer;
    margin-bottom: 30px;
  }
 .report-list ul li:hover div .title {
    color: rgb(49, 147, 245);
}
  .item >.title{
    font-size: 16px;
   margin-bottom: 6px;
    border-bottom: 1px solid #e6e6e6;
    display: inline-block;
    padding-bottom: 2px;
  }
    .item >.desc{
font-size: 12px;
line-height: 20px;

  }



.layui-tab-content{
  overflow-y: auto;
}