- 主页一
+
diff --git a/js/okadmin.js b/js/okadmin.js
index dd9ded0..6cf9335 100644
--- a/js/okadmin.js
+++ b/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,
- okUtils = layui.okUtils,
- $ = layui.jquery,
- layer = layui.layer,
- okTab = layui.okTab({
- url: "./data/navs.json",
- openTabNum: 30, //允许同时选项卡的个数
- parseData:function (data) {//如果返回的结果和navs.json中的数据结构一致可省略这个方法
- return data;
+ var element = layui.element,
+ okUtils = layui.okUtils,
+ $ = layui.jquery,
+ layer = layui.layer,
+ okTab = layui.okTab({
+ url: "./data/navs.json",
+ openTabNum: 30, //允许同时选项卡的个数
+ parseData: function (data) {//如果返回的结果和navs.json中的数据结构一致可省略这个方法
+ return data;
+ }
+ });
+
+ okTab.render(function () {
+ //左侧导航渲染完成之后的操作
+
+
+ });//渲染左侧导航
+
+ // 添加新窗口
+ $("body").on("click", "#navBar .layui-nav-item a,#userInfo a", function () {
+ //如果不存在子级
+ if ($(this).siblings().length == 0) {
+ okTab.tabAdd($(this));
}
- });
-
- 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");//关闭其他的二级标签
- });
-
- /**
- * 左边菜单显隐功能
- * @type {boolean}
- */
- $(".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上线啦(^し^)
" + - "在此郑重承诺该模板永久免费为大家提供" + - "
若有更好的建议欢迎加入QQ群一起聊", - 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 - }); - } + $(this).parent("li").siblings().removeClass("layui-nav-itemed");//关闭其他的二级标签 + }); + + /** + * 左边菜单显隐功能 + * @type {boolean} + */ + $(".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"); } - }); - } - - /** - * 捐赠作者 - */ - $(".layui-footer button.donate").click(function () { - layer.tab({ - area: ["330px", "350px"], - tab: [{ - title: "支付宝", - content: "
"
- }, {
- title: "微信",
- content: "
"
- }]
- });
- });
-
- /**
- * QQ群交流
- */
- $("body").on("click", ".layui-footer button.communication,#noticeQQ", function () {
- layer.tab({
- area: ["330px", "350px"],
- tab: [{
- title: "QQ群",
- content: "
"
- }]
- });
- });
-
- /**
- * 退出操作
- */
- $("#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});
- }
+ });
+ //移动端的处理事件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("返回值");
});
- });
- });
-
- // console.log(" _ _ _ \n" +
- // " | | | | (_) \n" +
- // " ___ | | _ _____ _____ __| |____ _ ____ \n" +
- // " / _ \\| |_/ |_____|____ |/ _ | \\| | _ \\ \n" +
- // "| |_| | _ ( / ___ ( (_| | | | | | | | |\n" +
- // " \\___/|_| \\_) \\_____|\\____|_|_|_|_|_| |_|\n" +
- // " \n" +
- // "版本：v2.0\n" +
- // "作者：bobi\n" +
- // "邮箱：bobi1234@foxmail.com\n" +
- // "描述：一个很赞的，扁平化风格的，响应式布局的后台管理模版，旨为后端程序员减压！");
+ }
+
+ /**
+ * 系统公告
+ */
+ $(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上线啦(^し^)
" + + "在此郑重承诺该模板永久免费为大家提供" + + "
若有更好的建议欢迎加入QQ群一起聊", + 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: ""
+ }, {
+ title: "微信",
+ content: ""
+ }]
+ });
+ });
+
+ /**
+ * QQ群交流
+ */
+ $("body").on("click", ".layui-footer button.communication,#noticeQQ", function () {
+ layer.tab({
+ area: ["330px", "350px"],
+ tab: [{
+ title: "QQ群",
+ content: ""
+ }]
+ });
+ });
+
+ /**
+ * 退出操作
+ */
+ $("#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" +
+ // "描述：一个很赞的，扁平化风格的，响应式布局的后台管理模版，旨为后端程序员减压！");
});
diff --git a/lib/layui/lay/okmodules/okTab.js b/lib/layui/lay/okmodules/okTab.js
index 54ae954..2b7501d 100644
--- a/lib/layui/lay/okmodules/okTab.js
+++ b/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无效)
- parseData:''//这是一个方法处理url请求地址的返回值(该方法必须提供一个返回值)
+ data: [],//菜单数据列表(如果传入了url则data无效)
+ 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("");
-
- if (_this.children("i").length < 1) {
- _this.prepend("");
- }
- 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 = ("").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("");
+
+ if (_this.children("i").length < 1) {
+ _this.prepend("");
+ }
+ 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 = ("").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'){
- if(_data.length < 1){
+ /**打开缓存中的tab**/
+ 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);
}
};
diff --git a/lib/layui/lay/okmodules/okTabOut.js b/lib/layui/lay/okmodules/okTabOut.js
deleted file mode 100644
index 2161035..0000000
--- a/lib/layui/lay/okmodules/okTabOut.js
+++ /dev/null
@@ -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("");
-
- if (_this.children("i").length < 1) {
- _this.prepend("");
- }
- 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: `
-
- `
- , 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 += '- ';
- } else if (data[i].spread) {
- ulItem += '
- ';
- } else {
- ulItem += '
- ';
- }
- createMenu(data[i], (i + 1).toString());
- ulItem += temp;
- ulItem += '
';
- }
- return ulItem;
- };
-
- /**
- * 递归生成菜单
- * @param data 数据
- * @param tabID 设置lay-id使用
- */
- function createMenu(data, tabID) {
- if (data.children != undefined && data.children.length > 0) {
- temp += '';
- if (data.icon != undefined && data.icon != '') {
- if (data.fontFamily && data.fontFamily.indexOf("layui-icon") < 0) {
- if (data.icon.indexOf("&#") >= 0) {
- temp += ('{1}').format(data.fontFamily, data.icon);
- } else {
- temp += ('').format(data.fontFamily, data.icon);
- }
- } else {
- temp += ('{1}').format(data.icon, data.icon);
- }
- }
- temp += '' + data.title + '';
- temp += '';
- temp += '';
- temp += '
" + - "在此郑重承诺该模板永久免费为大家提供" + - "
若有更好的建议欢迎加入QQ群一起聊", - 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 - }); - } + $(this).parent("li").siblings().removeClass("layui-nav-itemed");//关闭其他的二级标签 + }); + + /** + * 左边菜单显隐功能 + * @type {boolean} + */ + $(".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"); } - }); - } - - /** - * 捐赠作者 - */ - $(".layui-footer button.donate").click(function () { - layer.tab({ - area: ["330px", "350px"], - tab: [{ - title: "支付宝", - content: "
"
- }, {
- title: "微信",
- content: ""
- }]
- });
- });
-
- /**
- * QQ群交流
- */
- $("body").on("click", ".layui-footer button.communication,#noticeQQ", function () {
- layer.tab({
- area: ["330px", "350px"],
- tab: [{
- title: "QQ群",
- content: ""
- }]
- });
- });
-
- /**
- * 退出操作
- */
- $("#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});
- }
+ });
+ //移动端的处理事件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("返回值");
});
- });
- });
-
- // console.log(" _ _ _ \n" +
- // " | | | | (_) \n" +
- // " ___ | | _ _____ _____ __| |____ _ ____ \n" +
- // " / _ \\| |_/ |_____|____ |/ _ | \\| | _ \\ \n" +
- // "| |_| | _ ( / ___ ( (_| | | | | | | | |\n" +
- // " \\___/|_| \\_) \\_____|\\____|_|_|_|_|_| |_|\n" +
- // " \n" +
- // "版本：v2.0\n" +
- // "作者：bobi\n" +
- // "邮箱：bobi1234@foxmail.com\n" +
- // "描述：一个很赞的，扁平化风格的，响应式布局的后台管理模版，旨为后端程序员减压！");
+ }
+
+ /**
+ * 系统公告
+ */
+ $(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上线啦(^し^)" + + "在此郑重承诺该模板永久免费为大家提供" + + "
若有更好的建议欢迎加入QQ群一起聊", + 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: "
"
+ }, {
+ title: "微信",
+ content: ""
+ }]
+ });
+ });
+
+ /**
+ * QQ群交流
+ */
+ $("body").on("click", ".layui-footer button.communication,#noticeQQ", function () {
+ layer.tab({
+ area: ["330px", "350px"],
+ tab: [{
+ title: "QQ群",
+ content: ""
+ }]
+ });
+ });
+
+ /**
+ * 退出操作
+ */
+ $("#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" +
+ // "描述：一个很赞的，扁平化风格的，响应式布局的后台管理模版，旨为后端程序员减压！");
});
diff --git a/lib/layui/lay/okmodules/okTab.js b/lib/layui/lay/okmodules/okTab.js
index 54ae954..2b7501d 100644
--- a/lib/layui/lay/okmodules/okTab.js
+++ b/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无效)
- parseData:''//这是一个方法处理url请求地址的返回值(该方法必须提供一个返回值)
+ data: [],//菜单数据列表(如果传入了url则data无效)
+ 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("");
-
- if (_this.children("i").length < 1) {
- _this.prepend("");
- }
- 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 = ("").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("");
+
+ if (_this.children("i").length < 1) {
+ _this.prepend("");
+ }
+ 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 = ("").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'){
- if(_data.length < 1){
+ /**打开缓存中的tab**/
+ 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);
}
};
diff --git a/lib/layui/lay/okmodules/okTabOut.js b/lib/layui/lay/okmodules/okTabOut.js
deleted file mode 100644
index 2161035..0000000
--- a/lib/layui/lay/okmodules/okTabOut.js
+++ /dev/null
@@ -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("");
-
- if (_this.children("i").length < 1) {
- _this.prepend("");
- }
- 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: `
-
- `
- , 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 += '- ';
- for (var i = 0; i < data.children.length; i++) {
- temp += '
- '; - var lay_id = tabID + "-" + (i + 1); - createMenu(data.children[i], lay_id); - temp += ' '; - } - temp += "