关于javascript:layui-手把手教你实现多页签打开页面

4次阅读

共计 6588 个字符，预计需要花费 17 分钟才能阅读完成。

在我的项目需要中关上的模块页面总是在一个总视图中去显示，其实在用户体验中不算太好，因为用户在 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" width="100%" height="' +
        ($(".body-main").height() -
        50) +
        '"scrolling="no"marginheight="0"marginwidth="0"></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" width="100%" height="' +
        ($(".body-main").height() -
        50) +
        '"scrolling="no"marginheight="0"marginwidth="0"></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;}

正文完