up: idnex.html,okadmin.js,okTab.js

index.html

@@ -115,14 +115,14 @@
             </ul>
          </div>
 
-         <ul class="layui-tab-title ok-tab-title not-scroll">
+         <ul id="tabTitle" class="layui-tab-title ok-tab-title not-scroll">
             <li class="layui-this" lay-id="1" tab="index">
                <i class="ok-icon ok-iconairplay"></i>
                <cite is-close=false>主页一</cite>
             </li>
          </ul>
 
-         <div class="layui-tab-content ok-tab-content">
+         <div id="tabContent" class="layui-tab-content ok-tab-content">
             <div class="layui-tab-item layui-show">
                <iframe src='pages/home.html' frameborder="0" scrolling="yes" width="100%" height="100%"></iframe>
             </div>

js/okadmin.js

@@ -1,250 +1,250 @@
 /^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
 layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
-  var element = layui.element,
+   var element = layui.element,
-    okUtils = layui.okUtils,
+      okUtils = layui.okUtils,
-    $ = layui.jquery,
+      $ = layui.jquery,
-    layer = layui.layer,
+      layer = layui.layer,
-    okTab = layui.okTab({
+      okTab = layui.okTab({
-      url: "./data/navs.json",
+         url: "./data/navs.json",
-      openTabNum: 30, //允许同时选项卡的个数
+         openTabNum: 30, //允许同时选项卡的个数
-      parseData:function (data) {//如果返回的结果和navs.json中的数据结构一致可省略这个方法
+         parseData: function (data) {//如果返回的结果和navs.json中的数据结构一致可省略这个方法
-        return data;
+            return data;
+         }
+      });
+   
+   okTab.render(function () {
+      //左侧导航渲染完成之后的操作
+      
+      
+   });//渲染左侧导航
+   
+   // 添加新窗口
+   $("body").on("click", "#navBar .layui-nav-item a,#userInfo a", function () {
+      //如果不存在子级
+      if ($(this).siblings().length == 0) {
+         okTab.tabAdd($(this));
       }
-    });
+      $(this).parent("li").siblings().removeClass("layui-nav-itemed");//关闭其他的二级标签
-  
+   });
-  okTab.render(function () {
+   
-    //左侧导航渲染完成之后的操作
+   /**
-    
+    * 左边菜单显隐功能
-    
+    * @type {boolean}
-  });//渲染左侧导航
+    */
-  
+   $(".ok-menu").click(function () {
-  // 添加新窗口
+      $(".layui-layout-admin").toggleClass("ok-left-hide");
-  $("body").on("click", "#navBar .layui-nav-item a,#userInfo a", function () {
+      $(this).find('i').toggleClass("ok-menu-hide");
-    //如果不存在子级
+      localStorage.setItem("isResize", false);
-    if ($(this).siblings().length == 0) {
+      setTimeout(function () {
-      okTab.tabAdd($(this));
+         localStorage.setItem("isResize", true);
-    }
+      }, 1200);
-    $(this).parent("li").siblings().removeClass("layui-nav-itemed");//关闭其他的二级标签
+   });
-  });
+   
-  
+   //移动端的处理事件Start
-  /**
+   $("body").on("click", ".layui-layout-admin .ok-left a[data-url],.ok-make", function () {
-   * 左边菜单显隐功能
+      if ($(".layui-layout-admin").hasClass("ok-left-hide")) {
-   * @type {boolean}
+         $(".layui-layout-admin").removeClass("ok-left-hide");
-   */
+         $(".ok-menu").find('i').removeClass("ok-menu-hide");
-  $(".ok-menu").click(function () {
-    $(".layui-layout-admin").toggleClass("ok-left-hide");
-    $(this).find('i').toggleClass("ok-menu-hide");
-    localStorage.setItem("isResize",false);
-    setTimeout(function () {
-      localStorage.setItem("isResize",true);
-    },1200);
-  });
-  
-  //移动端的处理事件Start
-  $("body").on("click", ".layui-layout-admin .ok-left a[data-url],.ok-make", function () {
-    if ($(".layui-layout-admin").hasClass("ok-left-hide")) {
-      $(".layui-layout-admin").removeClass("ok-left-hide");
-      $(".ok-menu").find('i').removeClass("ok-menu-hide");
-    }
-  });
-  //移动端的处理事件End
-  
-  //tab左右移动
-  $("body").on("click", ".okNavMove", function () {
-    var moveId = $(this).attr("data-id");
-    var that = this;
-    okTab.navMove(moveId, that);
-    // console.log(width);
-  });
-  
-  //刷新当前tab页
-  $("body").on("click", ".ok-refresh", function () {
-    okTab.refresh(this);
-  });
-  
-  //关闭tab页
-  $("body").on("click", "#tabAction a", function () {
-    var num = $(this).attr('data-num');
-    okTab.tabClose(num);
-  });
-  
-  //全屏/退出全屏
-  $("body").on("keydown", function (event) {
-    event = event || window.event || arguments.callee.caller.arguments[0];
-    if (event && event.keyCode == 27) { // 按 Esc
-      console.log("Esc");
-      $("#fullScreen").children("i").eq(0).removeClass("okicon-screen-restore");
-    }
-    if (event && event.keyCode == 122) { // 按 F11
-      $("#fullScreen").children("i").eq(0).addClass("okicon-screen-restore");
-    }
-  });
-  
-  $("body").on("click", "#fullScreen", function () {
-    if ($(this).children("i").hasClass("okicon-screen-restore")) {
-      screenFun(2).then(function(){
-        $(this).children("i").eq(0).removeClass("okicon-screen-restore");
-      });
-    } else {
-      screenFun(1).then(function(){
-        $(this).children("i").eq(0).addClass("okicon-screen-restore");
-      });
-    }
-  });
-  
-  /**
-   * 全屏和退出全屏的方法
-   * @param num
-   * num为1代表全屏
-   * num为2代表退出全屏
-   */
-  function screenFun(num) {
-    num = num || 1;
-    num = num * 1;
-    var docElm = document.documentElement;
-    
-    switch (num) {
-      case 1:
-        if (docElm.requestFullscreen) {
-          docElm.requestFullscreen();
-        } else if (docElm.mozRequestFullScreen) {
-          docElm.mozRequestFullScreen();
-        } else if (docElm.webkitRequestFullScreen) {
-          docElm.webkitRequestFullScreen();
-        } else if (docElm.msRequestFullscreen) {
-          docElm.msRequestFullscreen();
-        }
-        break;
-      case 2:
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.webkitCancelFullScreen) {
-          document.webkitCancelFullScreen();
-        } else if (document.msExitFullscreen) {
-          document.msExitFullscreen();
-        }
-        break;
-    }
-    
-    return new Promise(function(res, rej){
-      res("返回值");
-    });
-  }
-  
-  /**
-   * 系统公告
-   */
-  $(document).on("click", "#notice", noticeFun);
-  !function () {
-    let notice = sessionStorage.getItem("notice");
-    if (notice != "true") {
-      noticeFun();
-    }
-  }();
-  
-  function noticeFun() {
-    var srcWidth = okUtils.getBodyWidth();
-    layer.open({
-      type: 0,
-      title: "系统公告",
-      btn: "我知道啦",
-      btnAlign: 'c',
-      content: "ok-admin v2.0上线啦(^し^)<br />" +
-        "在此郑重承诺该模板<span style='color:#5cb85c'>永久免费</span>为大家提供" +
-        "<br />若有更好的建议欢迎<span id='noticeQQ'>加入QQ群</span>一起聊",
-      yes: function(index){
-        if (srcWidth > 800) {
-          layer.tips('公告跑到这里去啦', '#notice', {
-            tips: [1, '#000'],
-            time: 2000
-          });
-        }
-        sessionStorage.setItem("notice", "true");
-        layer.close(index);
-      },
-      cancel: function(index){
-        if (srcWidth > 800) {
-          layer.tips('公告跑到这里去啦', '#notice', {
-            tips: [1, '#000'],
-            time: 2000
-          });
-        }
       }
-    });
+   });
-  }
+   //移动端的处理事件End
-  
+   
-  /**
+   //tab左右移动
-   * 捐赠作者
+   $("body").on("click", ".okNavMove", function () {
-   */
+      var moveId = $(this).attr("data-id");
-  $(".layui-footer button.donate").click(function () {
+      var that = this;
-    layer.tab({
+      okTab.navMove(moveId, that);
-      area: ["330px", "350px"],
+      // console.log(width);
-      tab: [{
+   });
-        title: "支付宝",
+   
-        content: "<img src='images/zfb.jpg' width='200' height='300' style='margin-left: 60px'>"
+   //刷新当前tab页
-      }, {
+   $("body").on("click", ".ok-refresh", function () {
-        title: "微信",
+      okTab.refresh(this);
-        content: "<img src='images/wx.jpg' width='200' height='300' style='margin-left: 60px'>"
+   });
-      }]
+   
-    });
+   //关闭tab页
-  });
+   $("body").on("click", "#tabAction a", function () {
-  
+      var num = $(this).attr('data-num');
-  /**
+      okTab.tabClose(num);
-   * QQ群交流
+   });
-   */
+   
-  $("body").on("click", ".layui-footer button.communication,#noticeQQ", function () {
+   //全屏/退出全屏
-    layer.tab({
+   $("body").on("keydown", function (event) {
-      area: ["330px", "350px"],
+      event = event || window.event || arguments.callee.caller.arguments[0];
-      tab: [{
+      if (event && event.keyCode == 27) { // 按 Esc
-        title: "QQ群",
+         console.log("Esc");
-        content: "<img src='images/qq.jpeg' width='200' height='300' style='margin-left: 60px'>"
+         $("#fullScreen").children("i").eq(0).removeClass("okicon-screen-restore");
-      }]
+      }
-    });
+      if (event && event.keyCode == 122) { // 按 F11
-  });
+         $("#fullScreen").children("i").eq(0).addClass("okicon-screen-restore");
-  
+      }
-  /**
+   });
-   * 退出操作
+   
-   */
+   $("body").on("click", "#fullScreen", function () {
-  $("#logout").click(function () {
+      if ($(this).children("i").hasClass("okicon-screen-restore")) {
-    layer.confirm("确定要退出吗？", {skin: 'layui-layer-lan', icon: 3, title: '提示', anim: 6}, function () {
+         screenFun(2).then(function () {
-      window.location = "./pages/login.html";
+            $(this).children("i").eq(0).removeClass("okicon-screen-restore");
-    });
+         });
-  });
+      } else {
-  
+         screenFun(1).then(function () {
-  /**
+            $(this).children("i").eq(0).addClass("okicon-screen-restore");
-   * 锁定账户
+         });
-   */
+      }
-  $("#lock").click(function () {
+   });
-    layer.confirm("确定要锁定账户吗？", {skin: 'layui-layer-lan', icon: 4, title: '提示', anim: 1}, function (index) {
+   
-      layer.close(index);
+   /**
-      $(".yy").show();
+    * 全屏和退出全屏的方法
-      layer.prompt({
+    * @param num
-        btn: ['确定'],
+    * num为1代表全屏
-        title: '输入密码解锁(123456)',
+    * num为2代表退出全屏
-        closeBtn: 0,
+    */
-        formType: 1
+   function screenFun(num) {
-      }, function (value, index, elem) {
+      num = num || 1;
-        if (value == "123456") {
+      num = num * 1;
-          layer.close(index);
+      var docElm = document.documentElement;
-          $(".yy").hide();
+      
-        } else {
+      switch (num) {
-          layer.msg('密码错误', {anim: 6});
+         case 1:
-        }
+            if (docElm.requestFullscreen) {
+               docElm.requestFullscreen();
+            } else if (docElm.mozRequestFullScreen) {
+               docElm.mozRequestFullScreen();
+            } else if (docElm.webkitRequestFullScreen) {
+               docElm.webkitRequestFullScreen();
+            } else if (docElm.msRequestFullscreen) {
+               docElm.msRequestFullscreen();
+            }
+            break;
+         case 2:
+            if (document.exitFullscreen) {
+               document.exitFullscreen();
+            } else if (document.mozCancelFullScreen) {
+               document.mozCancelFullScreen();
+            } else if (document.webkitCancelFullScreen) {
+               document.webkitCancelFullScreen();
+            } else if (document.msExitFullscreen) {
+               document.msExitFullscreen();
+            }
+            break;
+      }
+      
+      return new Promise(function (res, rej) {
+         res("返回值");
       });
-    });
+   }
-  });
+   
-  
+   /**
-  // console.log("       _                     _       _       \n" +
+    * 系统公告
-  //     "      | |                   | |     (_)      \n" +
+    */
-  //     "  ___ | |  _ _____ _____  __| |____  _ ____  \n" +
+   $(document).on("click", "#notice", noticeFun);
-  //     " / _ \\| |_/ |_____|____ |/ _  |    \\| |  _ \\ \n" +
+   !function () {
-  //     "| |_| |  _ (      / ___ ( (_| | | | | | | | |\n" +
+      let notice = sessionStorage.getItem("notice");
-  //     " \\___/|_| \\_)     \\_____|\\____|_|_|_|_|_| |_|\n" +
+      if (notice != "true") {
-  //     "                                             \n" +
+         noticeFun();
-  //     "版本：v2.0\n" +
+      }
-  //     "作者：bobi\n" +
+   }();
-  //     "邮箱：bobi1234@foxmail.com\n" +
+   
-  //     "描述：一个很赞的，扁平化风格的，响应式布局的后台管理模版，旨为后端程序员减压！");
+   function noticeFun() {
+      var srcWidth = okUtils.getBodyWidth();
+      layer.open({
+         type: 0,
+         title: "系统公告",
+         btn: "我知道啦",
+         btnAlign: 'c',
+         content: "ok-admin v2.0上线啦(^し^)<br />" +
+            "在此郑重承诺该模板<span style='color:#5cb85c'>永久免费</span>为大家提供" +
+            "<br />若有更好的建议欢迎<span id='noticeQQ'>加入QQ群</span>一起聊",
+         yes: function (index) {
+            if (srcWidth > 800) {
+               layer.tips('公告跑到这里去啦', '#notice', {
+                  tips: [1, '#000'],
+                  time: 2000
+               });
+            }
+            sessionStorage.setItem("notice", "true");
+            layer.close(index);
+         },
+         cancel: function (index) {
+            if (srcWidth > 800) {
+               layer.tips('公告跑到这里去啦', '#notice', {
+                  tips: [1, '#000'],
+                  time: 2000
+               });
+            }
+         }
+      });
+   }
+   
+   /**
+    * 捐赠作者
+    */
+   $(".layui-footer button.donate").click(function () {
+      layer.tab({
+         area: ["330px", "350px"],
+         tab: [{
+            title: "支付宝",
+            content: "<img src='images/zfb.jpg' width='200' height='300' style='margin-left: 60px'>"
+         }, {
+            title: "微信",
+            content: "<img src='images/wx.jpg' width='200' height='300' style='margin-left: 60px'>"
+         }]
+      });
+   });
+   
+   /**
+    * QQ群交流
+    */
+   $("body").on("click", ".layui-footer button.communication,#noticeQQ", function () {
+      layer.tab({
+         area: ["330px", "350px"],
+         tab: [{
+            title: "QQ群",
+            content: "<img src='images/qq.jpeg' width='200' height='300' style='margin-left: 60px'>"
+         }]
+      });
+   });
+   
+   /**
+    * 退出操作
+    */
+   $("#logout").click(function () {
+      layer.confirm("确定要退出吗？", {skin: 'layui-layer-lan', icon: 3, title: '提示', anim: 6}, function () {
+         window.location = "./pages/login.html";
+      });
+   });
+   
+   /**
+    * 锁定账户
+    */
+   $("#lock").click(function () {
+      layer.confirm("确定要锁定账户吗？", {skin: 'layui-layer-lan', icon: 4, title: '提示', anim: 1}, function (index) {
+         layer.close(index);
+         $(".yy").show();
+         layer.prompt({
+            btn: ['确定'],
+            title: '输入密码解锁(123456)',
+            closeBtn: 0,
+            formType: 1
+         }, function (value, index, elem) {
+            if (value == "123456") {
+               layer.close(index);
+               $(".yy").hide();
+            } else {
+               layer.msg('密码错误', {anim: 6});
+            }
+         });
+      });
+   });
+   
+   // console.log("       _                     _       _       \n" +
+   //     "      | |                   | |     (_)      \n" +
+   //     "  ___ | |  _ _____ _____  __| |____  _ ____  \n" +
+   //     " / _ \\| |_/ |_____|____ |/ _  |    \\| |  _ \\ \n" +
+   //     "| |_| |  _ (      / ___ ( (_| | | | | | | | |\n" +
+   //     " \\___/|_| \\_)     \\_____|\\____|_|_|_|_|_| |_|\n" +
+   //     "                                             \n" +
+   //     "版本：v2.0\n" +
+   //     "作者：bobi\n" +
+   //     "邮箱：bobi1234@foxmail.com\n" +
+   //     "描述：一个很赞的，扁平化风格的，响应式布局的后台管理模版，旨为后端程序员减压！");
 });

lib/layui/lay/okmodules/okTab.js

@@ -18,6 +18,36 @@ String.prototype.format = function () {
    }
 };
 
+/**打开已经打开的tabMenu**/
+let OpenTabMenuFun = function ($,fun) {
+   var tabMenu = localStorage.getItem("tabMenu");//已经打开的tab页面
+   var tabMenuLeft = localStorage.getItem("tabMenuLeft");//tab的位置
+   if (tabMenu) {
+      tabMenu = JSON.parse(tabMenu);
+      $("#tabTitle").html(tabMenu.tabTitle).animate({
+         left: tabMenuLeft
+      }, 50);
+      $("#tabContent").html(tabMenu.tabContent);
+      if(typeof fun == 'function'){
+         fun();
+      }
+   }
+};
+/**存储打开的tabMenu**/
+function saveTabMenuFun($) {
+   let tabMenu = JSON.stringify({
+      tabTitle: $("#tabTitle").html(),
+      tabContent: $("#tabContent").html()
+   });
+   localStorage.setItem('tabMenu', tabMenu);
+   localStorage.setItem('tabMenuLeft', $("#tabTitle").css('left'));
+}
+/**tab的位置**/
+function saveTabMenuPosition(num){
+   // num = num || $("#tabTitle").css('left');
+   // localStorage.setItem('tabMenuLeft', num);
+}
+
 layui.define(["element", "jquery"], function (exports) {
    var layui = parent.layui || layui;
    $ = layui.jquery;
@@ -28,10 +58,11 @@ layui.define(["element", "jquery"], function (exports) {
             openTabNum: 30, //最大可打开窗口数量默认30
             tabFilter: "ok-tab", //添加窗口的filter
             url: "", //获取菜单的接口地址
-            data:[],//菜单数据列表(如果传入了url则data无效)
+            data: [],//菜单数据列表(如果传入了url则data无效)
-            parseData:''//这是一个方法处理url请求地址的返回值(该方法必须提供一个返回值)
+            parseData: ''//这是一个方法处理url请求地址的返回值(该方法必须提供一个返回值)
          }
       };
+   
    /**
     * 导航初始化的操作(只执行一次)
     * @param option 配置tabConfig参数
@@ -42,174 +73,10 @@ layui.define(["element", "jquery"], function (exports) {
       $.extend(true, _this.tabConfig, option); //函数用于将一个或多个对象的内容合并到目标对象。http://www.runoob.com/jquery/misc-extend.html
       this.tabDelete(); //关闭导航页的操作
       this.tab(); //tab导航切换时的操作
+      
       return _this;
    };
    
-   /**
-    * 定位tab位置
-    * @param superEle 父级元素
-    * @param ele 当前tab
-    */
-   okTab.prototype.positionTab = function (contEle, ele) {
-      
-      var superEle = $(".ok-tab");//父级元素
-      contEle = $(contEle);//tab内容存放的父元素
-      ele = $(ele);//当前的tab
-      
-      var menuSet = $(".okadmin-side a[lay-id]");//获取所有菜单集合
-      var thatLayId = ele.attr('lay-id');
-      
-      var contWidth = contEle.width(),//父级元素宽度
-         superWidth = parseInt(superEle.width()) - 40 * 3,//可显示的宽度
-         subWidth = ele.outerWidth(),//当前元素宽度
-         elePrevAll = ele.prevAll(),//左边的所有同级元素
-         leftWidth = 0,//左边距离
-         postLeft = Math.abs(contEle.position().left);//当前移动的位置
-      var maxMoveWidth = contWidth - superWidth;//最大可移动的宽度
-      
-      /*console.log("maxMoveWidth：" + maxMoveWidth);
-      console.log("superWidth：" + superWidth);
-      console.log("contWidth：" + contWidth);*/
-      // console.log(contEle);
-      for (let i = 0; i < elePrevAll.length; i++) {
-         leftWidth += $(elePrevAll[i]).outerWidth() * 1;
-      }
-      if (contWidth > superWidth) {
-         /**
-          * 移动tab栏的位置
-          */
-         var showPost = leftWidth - postLeft;//当前点击的元素位置（显示区域的位置）
-         var halfPlace = parseInt(superWidth / 2);//可显示的宽度的一半
-         
-         if (halfPlace < showPost) {//从右往左移动
-            var tempMove = leftWidth - subWidth;//预留一部分距离
-            if (tempMove > maxMoveWidth) {//当前移动的距离超过最大可移动的宽度
-               tempMove = maxMoveWidth;
-            }
-            contEle.animate({
-               left: -tempMove
-            }, 50);
-         } else {//从左往右移动
-            var tempMove = leftWidth - halfPlace;//预留一部分距离
-            if (tempMove < 0) {
-               tempMove = 0;
-            }
-            contEle.animate({
-               left: -tempMove
-            }, 50);
-         }
-      } else {
-         contEle.animate({
-            left: 0
-         }, 50);
-         //this.navMove("rightmax");
-      }
-      
-      /**
-       * 左侧菜单的样式和多级菜单的展开
-       */
-      $(".okadmin-side").find("li,dd").removeClass("layui-this").removeClass("layui-nav-itemed");//关闭所有展开的菜单
-      for (let i = 0; i < menuSet.length; i++) {
-         if ($(menuSet[i]).attr('lay-id') == thatLayId) {
-            $(menuSet[i]).parents("dd").addClass("layui-nav-itemed");
-            $(menuSet[i]).parents("li").addClass("layui-nav-itemed");
-            $(menuSet[i]).parent().removeClass("layui-nav-itemed").addClass("layui-this");
-            break;
-         }
-      }
-   };
-   
-   // 点击导航页的操作
-   okTab.prototype.tab = function () {
-      var that = this;
-      var filter = this.tabConfig.tabFilter;
-      // "hello {0}".format("world");
-      //`tab(${filter})`
-      element.on("tab({0})".format(filter), function (data) {
-         var index = data.index;//点击的某个tab索引
-         var elSuper = $(".ok-tab"),//视窗元素
-            elMove = $(".ok-tab-title"),//移动的元素
-            elTabs = $(".ok-tab-title li"),//所有已存在的tab集合
-            thatElem = $(elTabs[index]);//当前元素
-         that.positionTab(elMove, thatElem);
-      });
-   };
-   
-   //删除tab页的操作（此处为点击关闭按钮的操作）
-   okTab.prototype.tabDelete = function () {
-      var that = this;
-      var filter = this.tabConfig.tabFilter;
-      //`tabDelete(${filter})`
-      element.on("tabDelete({0})".format(filter), function (data) {
-         // that.navMove("right");
-      });
-   };
-   
-   //右侧内容nav操作添加tab页
-   okTab.prototype.tabAdd = function (_thisa) {
-      var that = this;
-      var _this = $(_thisa).clone(true);//拷贝dom（js： _this.cloneNode(true) ）
-      
-      var openTabNum = that.tabConfig.openTabNum;
-      var tabFilter = that.tabConfig.tabFilter;
-      var url = _this.attr("data-url");//选项卡的页面路径
-      var tabId = _this.attr("lay-id");//选项卡ID
-      var thatTabNum = $('.ok-tab-title > li').length;//当前已经打开的选项卡的数量
-      var iframes = $(".ok-tab-content iframe");
-      var isClose = _this.attr('is-close') || "true";
-      
-      _this.prepend("<strong style='display: none;' is-close=" + isClose + " lay-id=" + tabId + "></strong>");
-      
-      if (_this.children("i").length < 1) {
-         _this.prepend("<i class='layui-icon'></i>");
-      }
-      if (_this.attr("target") == "_blank") {
-         window.location.href = _this.attr("data-url");
-      } else if (url != undefined) {
-         var title = '';
-         var html = _this.html();
-         // 去重复选项卡
-         /**
-          * 这里还有一种情况就是同一选项卡页面路径不同（这个是多余的没必要了，页面不同，跳转的选项卡也应该新增）
-          */
-         for (var i = 0; i < thatTabNum; i++) {
-            if ($('.ok-tab-title > li').eq(i).attr('lay-id') == tabId) {
-               var iframeParam = (iframes[i].src).split("?")[1];
-               var urlParam = url.split("?")[1];
-               if (urlParam == iframeParam) {
-                  element.tabChange(tabFilter, tabId);
-               } else {
-                  //参数不一样的时候刷新并且更换参数
-                  iframes[i].contentWindow.location.reload(true);
-                  iframes[i].src = url;
-                  element.tabChange(tabFilter, tabId);
-               }
-               if (event) {
-                  event.stopPropagation();
-               }
-               return;
-            }
-         }
-         
-         if (thatTabNum >= openTabNum) {
-            layer.msg('最多只能同时打开' + openTabNum + '个选项卡哦。不然系统会卡的！');
-            return;
-         }
-         var contentIframe = ("<iframe src='{0}' lay-id='{1}'" +
-            "frameborder='0' scrolling='yes' width='100%' height='100%'>" +
-            "</iframe>").format(url, tabId);
-         element.tabAdd(tabFilter, {
-            title: html,
-            content: contentIframe,
-            id: tabId
-         });
-         
-         // 切换选项卡
-         element.tabChange(tabFilter, tabId);
-         this.navMove("rightmax");
-      }
-   };
-   
    //生成左侧菜单
    var temp = "";
    okTab.prototype.navBar = function (strData) {
@@ -297,14 +164,188 @@ layui.define(["element", "jquery"], function (exports) {
       }
    }
    
+   /**
+    * 定位tab位置
+    * @param superEle 父级元素
+    * @param ele 当前tab
+    */
+   okTab.prototype.positionTab = function (contEle, ele) {
+      
+      var superEle = $(".ok-tab");//父级元素
+      contEle = $(contEle);//tab内容存放的父元素
+      ele = $(ele);//当前的tab
+      
+      var menuSet = $(".okadmin-side a[lay-id]");//获取所有菜单集合
+      var thatLayId = ele.attr('lay-id');
+      
+      var contWidth = contEle.width(),//父级元素宽度
+         superWidth = parseInt(superEle.width()) - 40 * 3,//可显示的宽度
+         subWidth = ele.outerWidth(),//当前元素宽度
+         elePrevAll = ele.prevAll(),//左边的所有同级元素
+         leftWidth = 0,//左边距离
+         postLeft = Math.abs(contEle.position().left);//当前移动的位置
+      var maxMoveWidth = contWidth - superWidth;//最大可移动的宽度
+      
+      /*console.log("maxMoveWidth：" + maxMoveWidth);
+      console.log("superWidth：" + superWidth);
+      console.log("contWidth：" + contWidth);*/
+      // console.log(contEle);
+      for (let i = 0; i < elePrevAll.length; i++) {
+         leftWidth += $(elePrevAll[i]).outerWidth() * 1;
+      }
+      if (contWidth > superWidth) {
+         /**
+          * 移动tab栏的位置
+          */
+         var showPost = leftWidth - postLeft;//当前点击的元素位置（显示区域的位置）
+         var halfPlace = parseInt(superWidth / 2);//可显示的宽度的一半
+         var tempMove = 0;
+         if (halfPlace < showPost) {//从右往左移动
+            tempMove = leftWidth - subWidth;//预留一部分距离
+            if (tempMove > maxMoveWidth) {//当前移动的距离超过最大可移动的宽度
+               tempMove = maxMoveWidth;
+            }
+            contEle.animate({
+               left: -tempMove
+            }, 50);
+         } else {//从左往右移动
+            tempMove = leftWidth - halfPlace;//预留一部分距离
+            if (tempMove < 0) {
+               tempMove = 0;
+            }
+            contEle.animate({
+               left: -tempMove
+            }, 50);
+         }
+         /**存储tab位置**/
+         saveTabMenuPosition(-tempMove);
+      } else {
+         contEle.animate({
+            left: 0
+         }, 50);
+         //this.navMove("rightmax");
+         /**存储tab位置**/
+         saveTabMenuPosition(0);
+      }
+      
+      /**
+       * 左侧菜单的样式和多级菜单的展开
+       */
+      $(".okadmin-side").find("li,dd").removeClass("layui-this").removeClass("layui-nav-itemed");//关闭所有展开的菜单
+      for (let i = 0; i < menuSet.length; i++) {
+         if ($(menuSet[i]).attr('lay-id') == thatLayId) {
+            $(menuSet[i]).parents("dd").addClass("layui-nav-itemed");
+            $(menuSet[i]).parents("li").addClass("layui-nav-itemed");
+            $(menuSet[i]).parent().removeClass("layui-nav-itemed").addClass("layui-this");
+            break;
+         }
+      }
+   };
+   
+   // 点击导航页的操作
+   okTab.prototype.tab = function () {
+      var that = this;
+      var filter = this.tabConfig.tabFilter;
+      // "hello {0}".format("world");
+      //`tab(${filter})`
+      element.on("tab({0})".format(filter), function (data) {
+         var index = data.index;//点击的某个tab索引
+         var elSuper = $(".ok-tab"),//视窗元素
+            elMove = $(".ok-tab-title"),//移动的元素
+            elTabs = $(".ok-tab-title li"),//所有已存在的tab集合
+            thatElem = $(elTabs[index]);//当前元素
+         saveTabMenuFun($);
+         that.positionTab(elMove, thatElem);
+      });
+   };
+   
+   //删除tab页的操作（此处为点击关闭按钮的操作）
+   okTab.prototype.tabDelete = function () {
+      var that = this;
+      var filter = this.tabConfig.tabFilter;
+      //`tabDelete(${filter})`
+      element.on("tabDelete({0})".format(filter), function (data) {
+         // that.navMove("right");
+         /**保存展开的tab**/
+         saveTabMenuFun($);
+      });
+   };
+   
+   //添加tab页
+   okTab.prototype.tabAdd = function (_thisa) {
+      var that = this;
+      var _this = $(_thisa).clone(true);//拷贝dom（js： _this.cloneNode(true) ）
+      
+      var openTabNum = that.tabConfig.openTabNum;
+      var tabFilter = that.tabConfig.tabFilter;
+      var url = _this.attr("data-url");//选项卡的页面路径
+      var tabId = _this.attr("lay-id");//选项卡ID
+      var thatTabNum = $('.ok-tab-title > li').length;//当前已经打开的选项卡的数量
+      var iframes = $(".ok-tab-content iframe");
+      var isClose = _this.attr('is-close') || "true";
+      
+      _this.prepend("<strong style='display: none;' is-close=" + isClose + " lay-id=" + tabId + "></strong>");
+      
+      if (_this.children("i").length < 1) {
+         _this.prepend("<i class='layui-icon'></i>");
+      }
+      if (_this.attr("target") == "_blank") {
+         window.location.href = _this.attr("data-url");
+      } else if (url != undefined) {
+         var title = '';
+         var html = _this.html();
+         // 去重复选项卡
+         /**
+          * 这里还有一种情况就是同一选项卡页面路径不同（这个是多余的没必要了，页面不同，跳转的选项卡也应该新增）
+          */
+         for (var i = 0; i < thatTabNum; i++) {
+            if ($('.ok-tab-title > li').eq(i).attr('lay-id') == tabId) {
+               var iframeParam = (iframes[i].src).split("?")[1];
+               var urlParam = url.split("?")[1];
+               if (urlParam == iframeParam) {
+                  element.tabChange(tabFilter, tabId);
+               } else {
+                  //参数不一样的时候刷新并且更换参数
+                  iframes[i].contentWindow.location.reload(true);
+                  iframes[i].src = url;
+                  element.tabChange(tabFilter, tabId);
+               }
+               if (event) {
+                  event.stopPropagation();
+               }
+               return;
+            }
+         }
+         
+         if (thatTabNum >= openTabNum) {
+            layer.msg('最多只能同时打开' + openTabNum + '个选项卡哦。不然系统会卡的！');
+            return;
+         }
+         var contentIframe = ("<iframe src='{0}' lay-id='{1}'" +
+            "frameborder='0' scrolling='yes' width='100%' height='100%'>" +
+            "</iframe>").format(url, tabId);
+         element.tabAdd(tabFilter, {
+            title: html,
+            content: contentIframe,
+            id: tabId
+         });
+         
+         // 切换选项卡
+         element.tabChange(tabFilter, tabId);
+         this.navMove("rightmax");
+         /**保存展开的tab**/
+         saveTabMenuFun($);
+      }
+   };
+   
    //重新对导航进行渲染(此处有个回调函数，主要用作渲染完成之后的操作)
    okTab.prototype.render = function (fun) {
       var _this = this;//data
       var _data = _this.tabConfig.data;
-      if(_this.tabConfig.url){
+      if (_this.tabConfig.url) {
          $.get(_this.tabConfig.url, function (res) {
             _data = res;
-            if(typeof _this.tabConfig.parseData == "function"){
+            if (typeof _this.tabConfig.parseData == "function") {
                _data = _this.tabConfig.parseData(res);
             }
             $("#navBar").html(_this.navBar(_data));
@@ -316,8 +357,13 @@ layui.define(["element", "jquery"], function (exports) {
                fun();
             }
          });
-      }else if($.type(_data) == 'array'){
+         /**打开缓存中的tab**/
-         if(_data.length < 1){
+         OpenTabMenuFun($,function () {
+            // var filter = _this.tabConfig.tabFilter;
+            element.render("tab");
+         });
+      } else if ($.type(_data) == 'array') {
+         if (_data.length < 1) {
             alert("菜单集合中无任何数据");
          }
          var _data = _this.tabConfig.data;
@@ -329,7 +375,7 @@ layui.define(["element", "jquery"], function (exports) {
          if (typeof fun == "function") {
             fun();
          }
-      }else{
+      } else {
          alert("你的菜单配置有误请查看菜单配置说明");
       }
    };
@@ -394,6 +440,8 @@ layui.define(["element", "jquery"], function (exports) {
             break;
       }
       element.render("tab", filter);
+      /**保存展开的tab**/
+      saveTabMenuFun($);
    };
    
    /**
@@ -467,10 +515,12 @@ layui.define(["element", "jquery"], function (exports) {
          contEle.animate({
             left: moveLeft
          }, 50);
+         saveTabMenuPosition(moveLeft);
       } else {
          contEle.animate({
             left: 0
          }, 50);
+         saveTabMenuPosition(0);
       }
    };
    

lib/layui/lay/okmodules/okTabOut.js

@@ -1,391 +0,0 @@
-var $;
-String.prototype.format = function () {
-  //字符串占位符
-  //eg: var str1 = "hello {0}".format("world");
-  if (arguments.length == 0) return this;
-  var param = arguments[0];
-  var s = this;
-  if (typeof (param) == 'object') {
-    for (var key in param) {
-      s = s.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);
-    }
-    return s;
-  } else {
-    for (var i = 0; i < arguments.length; i++) {
-      s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
-    }
-    return s;
-  }
-};
-
-/** 元素是否处于父容器的可见区域不可见则移动到可见区域 */
-function isEleInView(superEle, ele) {
-  
-  
-  // if(){
-  //
-  // }
-  
-}
-
-layui.define(["element", "jquery"], function (exports) {
-  var layui = parent.layui || layui;
-  $ = layui.jquery;
-  var element = layui.element,
-    layer = layui.layer,
-    okTab = function () {
-      this.tabConfig = {
-        openTabNum: 30, //最大可打开窗口数量默认30
-        tabFilter: "ok-tab", //添加窗口的filter
-        url: "./data/navs.json" //获取菜单的接口地址
-      }
-    };
-  /**
-   * 导航初始化的操作(只执行一次)
-   * @param option 配置tabConfig参数
-   * @returns {okTab}
-   */
-  okTab.prototype.init = function (option) {
-    var _this = this; //这个this就是代表okTab（因为prototype的原因）
-    $.extend(true, _this.tabConfig, option); //函数用于将一个或多个对象的内容合并到目标对象。http://www.runoob.com/jquery/misc-extend.html
-    this.tabDelete(); //关闭导航页的操作
-    this.tab(); //tab导航切换时的操作
-    return _this;
-  };
-  
-  /**
-   * 定位tab位置
-   * @param superEle 父级元素
-   * @param ele 当前tab
-   */
-  okTab.prototype.positionTab = function (superEle, ele) {
-    superEle = $(superEle);
-    ele = $(ele);
-    var superWidth = superEle.width(),//父级元素宽度
-      subWidth = ele.outerWidth(),//当前元素宽度
-      elePrevAll = ele.prevAll(),//左边的所有同级元素
-      leftWidth = 0;//左边距离
-    for (var i = 0; i < elePrevAll.length; i++) {
-      leftWidth += $(elePrevAll[i]).outerWidth() * 1;
-    }
-    if (leftWidth + subWidth > superWidth) {
-      superEle.animate({
-        scrollLeft: leftWidth
-      }, 200);
-    } else {
-      superEle.animate({
-        scrollLeft: 0
-      }, 200);
-    }
-  };
-  
-  // 点击导航页的操作
-  okTab.prototype.tab = function () {
-    var that = this;
-    var filter = this.tabConfig.tabFilter;
-    element.on(`tab(${filter})`, function (data) {
-      var index = data.index;//点击的某个tab索引
-      var elSuper = $(".ok-tab"),//视窗元素
-        elMove = $(".ok-tab-title"),//移动的元素
-        elTabs = $(".ok-tab-title li"),//所有已存在的tab集合
-        thatElem = $(elTabs[index]);//当前元素
-      that.positionTab(elMove, thatElem);
-    });
-  };
-  
-  //删除tab页的操作（此处为点击关闭按钮的操作）
-  okTab.prototype.tabDelete = function () {
-    var that = this;
-    var filter = this.tabConfig.tabFilter;
-    element.on(`tabDelete(${filter})`, function (data) {
-      // that.navMove("right");
-    });
-  };
-  
-  //右侧内容nav操作添加tab页
-  okTab.prototype.tabAdd = function (_thisa) {
-    var that = this;
-    var _this = $(_thisa).clone(true);//拷贝dom（js： _this.cloneNode(true) ）
-    
-    var openTabNum = that.tabConfig.openTabNum;
-    var tabFilter = that.tabConfig.tabFilter;
-    var url = _this.attr("data-url");//选项卡的页面路径
-    var tabId = _this.attr("lay-id");//选项卡ID
-    var thatTabNum = $('.ok-tab-title > li').length;//当前已经打开的选项卡的数量
-    var iframes = $(".ok-tab-content iframe");
-    var isClose = _this.attr('is-close') || "true";
-    
-    _this.prepend("<strong style='display: none;' is-close=" + isClose + " lay-id=" + tabId + "></strong>");
-    
-    if (_this.children("i").length < 1) {
-      _this.prepend("<i class='layui-icon'></i>");
-    }
-    if (_this.attr("target") == "_blank") {
-      window.location.href = _this.attr("data-url");
-    } else if (url != undefined) {
-      var title = '';
-      var html = _this.html();
-      // 去重复选项卡
-      /**
-       * 这里还有一种情况就是同一选项卡页面路径不同（这个是多余的没必要了，页面不同，跳转的选项卡也应该新增）
-       */
-      for (var i = 0; i < thatTabNum; i++) {
-        if ($('.ok-tab-title > li').eq(i).attr('lay-id') == tabId) {
-          var iframeParam = (iframes[i].src).split("?")[1];
-          var urlParam = url.split("?")[1];
-          if (urlParam == iframeParam) {
-            element.tabChange(tabFilter, tabId);
-          } else {
-            //参数不一样的时候刷新并且更换参数
-            iframes[i].contentWindow.location.reload(true);
-            iframes[i].src = url;
-            element.tabChange(tabFilter, tabId);
-          }
-          if (event) {
-            event.stopPropagation();
-          }
-          return;
-        }
-      }
-      
-      if (thatTabNum >= openTabNum) {
-        layer.msg('最多只能同时打开' + openTabNum + '个选项卡哦。不然系统会卡的！');
-        return;
-      }
-      element.tabAdd(tabFilter, {
-        title: html
-        , content: `
-                <iframe src='${url}' lay-id='${tabId}' frameborder="0" scrolling="yes" width="100%" height="100%"></iframe>
-            `
-        , id: tabId
-      });
-      
-      // 切换选项卡
-      element.tabChange(tabFilter, tabId);
-      
-    }
-  };
-  
-  //生成左侧菜单
-  var temp = "";
-  okTab.prototype.navBar = function (strData) {
-    var data;
-    if (typeof (strData) == "string") {
-      var data = JSON.parse(strData); //有可能是字符串，转换一下
-    } else {
-      data = strData;
-    }
-    var ulItem = '';
-    for (var i = 0; i < data.length; i++) {
-      temp = "";
-      if (data[i].isCheck) {
-        ulItem += '<li class="layui-nav-item layui-this">';
-      } else if (data[i].spread) {
-        ulItem += '<li class="layui-nav-item layui-nav-itemed">';
-      } else {
-        ulItem += '<li class="layui-nav-item">';
-      }
-      createMenu(data[i], (i + 1).toString());
-      ulItem += temp;
-      ulItem += '</li>';
-    }
-    return ulItem;
-  };
-  
-  /**
-   * 递归生成菜单
-   * @param data 数据
-   * @param tabID 设置lay-id使用
-   */
-  function createMenu(data, tabID) {
-    if (data.children != undefined && data.children.length > 0) {
-      temp += '<a>';
-      if (data.icon != undefined && data.icon != '') {
-        if (data.fontFamily && data.fontFamily.indexOf("layui-icon") < 0) {
-          if (data.icon.indexOf("&#") >= 0) {
-            temp += ('<i class="{0}">{1}</i>').format(data.fontFamily, data.icon);
-          } else {
-            temp += ('<i class="{0} {1}"></i>').format(data.fontFamily, data.icon);
-          }
-        } else {
-          temp += ('<i class="layui-icon" data-icon="{0}">{1}</i>').format(data.icon, data.icon);
-        }
-      }
-      temp += '<cite>' + data.title + '</cite>';
-      temp += '<span class="layui-nav-more"></span>';
-      temp += '</a>';
-      temp += '<dl class="layui-nav-child">';
-      for (var i = 0; i < data.children.length; i++) {
-        temp += '<dd>';
-        var lay_id = tabID + "-" + (i + 1);
-        createMenu(data.children[i], lay_id);
-        temp += '</dd>';
-      }
-      temp += "</dl>";
-    } else {
-      var isClose = data.isClose === false ? "false" : "true";
-      if (data.target) {
-        temp += ('<a lay-id="{0}" data-url="{1}" target="{2}" is-close="{3}">').format(tabID, data.href, data.target, isClose);
-      } else {
-        temp += ('<a lay-id="{0}" data-url="{1}" is-close="{2}">').format(tabID, data.href, isClose);
-      }
-      if (data.icon != undefined && data.icon != '') {
-        if (data.fontFamily && data.fontFamily.indexOf("layui-icon") < 0) {
-          if (data.icon.indexOf("&#") >= 0) {
-            temp += ('<i class="{0}">{1}</i>').format(data.fontFamily, data.icon);
-          } else {
-            temp += ('<i class="{0} {1}"></i>').format(data.fontFamily, data.icon);
-          }
-        } else {
-          temp += ('<i class="layui-icon" data-icon="{0}">{1}</i>').format(data.icon, data.icon);
-        }
-      }
-      temp += ('<cite>{0}</cite></a>').format(data.title);
-      return;
-    }
-  }
-  
-  //重新对导航进行渲染(此处有个回调函数，主要用作渲染完成之后的操作)
-  okTab.prototype.render = function (fun) {
-    let _this = this;//data
-    $.get(_this.tabConfig.url, function (data) {
-      $("#navBar").html(_this.navBar(data));
-      element.render('nav');
-      $(window).resize(function () {
-        $("#navBar").height($(window).height() - 245);
-      });
-      if (typeof fun == "function") {
-        fun();
-      }
-    });
-  };
-  
-  //刷新当前tab页
-  okTab.prototype.refresh = function (_this) {
-    if (!($(_this).hasClass("refreshThis"))) {
-      $(_this).addClass("refreshThis");
-      $(".ok-tab-content .layui-show").find("iframe")[0].contentWindow.location.reload(true);
-      setTimeout(function () {
-        $(_this).removeClass("refreshThis");
-      }, 2000)
-    } else {
-      layer.msg("客官请不要频繁点击哦！我会反应不过来的");
-    }
-  };
-  
-  /**
-   * 关闭tab标签页操作
-   * @param num 默认为1
-   * 1：代表关闭当前标签页
-   * 2：代表关闭其他标签页
-   * 3：代表关闭所有标签页
-   */
-  okTab.prototype.tabClose = function (num = 1) {
-    num = num * 1;//强制转换成数字
-    var that = this;
-    let openTabs = $('.ok-tab-title > li strong[lay-id]').not('strong[is-close=false]'),//获取已打开的tab元素(除开不会被关闭的导航)
-      thatLayID = $('.ok-tab-title > li.layui-this strong[lay-id]').not('strong[is-close=false]').attr("lay-id") || '';//获取当前打开的tab元素ID(除开不会被关闭的导航)
-    
-    var filter = that.tabConfig.tabFilter;
-    if (thatLayID.length < 1 && num == 1) {
-      layer.msg("您不能关闭当前页哦 (๑╹◡╹)ﾉ");
-      return;
-    } else if (openTabs.length < 1) {
-      layer.msg("您好！当前没有可关闭的窗口了 (๑╹◡╹)ﾉ");
-      return;
-    }
-    switch (num) {
-      case 1:
-        element.tabDelete(filter, thatLayID);
-        break;
-      case 2:
-        if (openTabs.length > 0) {
-          openTabs.each(function (i, j) {
-            if ($(j).attr("lay-id") != thatLayID) {
-              element.tabDelete(filter, $(j).attr("lay-id"));
-            }
-          });
-        } else {
-          layer.msg("您好！当前没有可关闭的窗口了 (๑╹◡╹)ﾉ");
-          return;
-        }
-        break;
-      case 3:
-        openTabs.each(function (i, j) {
-          element.tabDelete(filter, $(j).attr("lay-id"));
-        });
-        break;
-    }
-    element.render("tab", filter);
-    // this.navMove("right");
-  };
-  
-  /**
-   * 移动标签导航
-   * @param moveId
-   *      为left:往左边移动
-   *      为right:往右边移动
-   *      为rightMax:跑到最右边
-   *      为leftMax:跑到最左边
-   */
-  okTab.prototype.navMove = function (moveId, that) {
-    var superEle = $(".ok-tab-title"),//父级元素
-      contWidth = parseInt(superEle.width()),//可显示的宽度
-      elTabs = $(".ok-tab-title li"),//所有已存在的tab集合
-      moveWidth = 0,//移动元素的总宽度
-      postLeft = superEle.scrollLeft();//滚动条位置
-    elTabs.each(function (i, j) {
-      moveWidth += $(j).outerWidth() * 1;
-    });
-    
-    var movePost = moveId.toLowerCase().indexOf("left") < 0 ? 1 : -1;//移动方向
-    var moveLeft = postLeft + parseInt((contWidth * 0.25 < 20 ? 20 : contWidth * 0.25) * movePost);
-    
-    if (moveWidth > contWidth) {
-      switch (moveId) {
-        case 'left':
-          if (postLeft <= 0) {
-            layer.tips('已到最左边啦', that, {
-              tips: [1, '#000'],
-              time: 2000
-            })
-          }
-          break;
-        case 'leftmax':
-          if (postLeft <= 0) {
-            layer.tips('已到最左边啦', that, {
-              tips: [1, '#000'],
-              time: 2000
-            })
-          }
-          moveLeft = 0;
-          break;
-        case 'right':
-          if (postLeft + contWidth >= moveWidth) {
-            layer.tips('已到最右边啦', that, {
-              tips: [1, '#000'],
-              time: 2000
-            });
-          }
-          break;
-        case 'rightmax':
-          if (postLeft + contWidth >= moveWidth) {
-            layer.tips('已到最右边啦', that, {
-              tips: [1, '#000'],
-              time: 2000
-            });
-          }
-          moveLeft = moveWidth;
-      }
-      superEle.animate({
-        scrollLeft: moveLeft
-      }, 200);
-    }
-  };
-  
-  exports("okTab", function (option) {
-    return new okTab().init(option);
-  });
-  
-});
-