From 7fd320189dff86c799c6bdb0b51b8be26365916b Mon Sep 17 00:00:00 2001 From: hello Date: Wed, 30 Oct 2019 18:12:26 +0800 Subject: [PATCH] =?UTF-8?q?add:=20=E6=B7=BB=E5=8A=A0tab=E5=8F=B3=E9=94=AE?= =?UTF-8?q?=E8=8F=9C=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/jquery.contextMenu.css | 44 ++ css/okadmin.css | 1 + js/okadmin.js | 712 ++++++++++++----------- lib/layui/lay/okmodules/jQContextMenu.js | 64 ++ lib/layui/lay/okmodules/okTab.js | 4 +- lib/layui/layui.js | 1 + 6 files changed, 486 insertions(+), 340 deletions(-) create mode 100644 css/jquery.contextMenu.css create mode 100644 lib/layui/lay/okmodules/jQContextMenu.js diff --git a/css/jquery.contextMenu.css b/css/jquery.contextMenu.css new file mode 100644 index 0000000..e59481c --- /dev/null +++ b/css/jquery.contextMenu.css @@ -0,0 +1,44 @@ +.ul-context-menu { + list-style:none; + position:absolute; + top:0; + left:0; + z-index:9999; + padding:5px 0; + min-width:80px; + margin:0; + display:none; + font-family:微软雅黑; + font-size:14px; + background-color:#fff; + border:1px solid rgba(0, 0, 0, .15); + box-sizing:border-box; + border-radius:4px; + -webkit-box-shadow:0 4px 12px rgba(0, 0, 0, .1); + -moz-box-shadow:0 4px 12px rgba(0, 0, 0, .1); + -ms-box-shadow:0 4px 12px rgba(0, 0, 0, .1); + -o-box-shadow:0 4px 12px rgba(0, 0, 0, .1); + box-shadow:0 4px 12px rgba(0, 0, 0, .1) +} +.ul-context-menu .ui-context-menu-item { + margin:0; + padding:0 +} +.ul-context-menu .ui-context-menu-item a { + display:block; + padding:0 10px; + color:#333; + white-space:nowrap; + text-decoration:none +} +.ul-context-menu .ui-context-menu-item a:hover { + text-decoration:none; + color:#262626 +} +.ul-context-menu .ui-context-menu-item .icon { + width:16px; + height:16px; + margin-right:8px; + vertical-align:middle; + border:0 +} diff --git a/css/okadmin.css b/css/okadmin.css index 768dc84..24eaf49 100644 --- a/css/okadmin.css +++ b/css/okadmin.css @@ -1,5 +1,6 @@ @import "../lib/layui/css/layui.css"; @import "../lib/fonts/iconfont.css"; +@import "./jquery.contextMenu.css"; /*边距*/ .ptb20{ diff --git a/js/okadmin.js b/js/okadmin.js index 84ea2ea..ced397c 100644 --- a/js/okadmin.js +++ b/js/okadmin.js @@ -1,355 +1,391 @@ /^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问'); var objOkTab = ""; -layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () { - var okUtils = layui.okUtils; - var $ = layui.jquery; - var layer = layui.layer; - var okLayer = layui.okLayer; +layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "jQContextMenu"], function () { + var okUtils = layui.okUtils; + var $ = layui.jquery; + var layer = layui.layer; + var okLayer = layui.okLayer; - var okTab = layui.okTab({ - // 菜单请求路径 - url: "data/navs.json", - // 允许同时选项卡的个数 - openTabNum: 30, - // 如果返回的结果和navs.json中的数据结构一致可省略这个方法 - parseData: function (data) { - return data; - } - }); - objOkTab = okTab; + var okTab = layui.okTab({ + // 菜单请求路径 + url: "data/navs.json", + // 允许同时选项卡的个数 + openTabNum: 30, + // 如果返回的结果和navs.json中的数据结构一致可省略这个方法 + parseData: function (data) { + return data; + } + }); + objOkTab = okTab; - /** - * 左侧导航渲染完成之后的操作 - */ - okTab.render(function () { - }); + /** + * 左侧导航渲染完成之后的操作 + */ + okTab.render(function () { + /**tab栏的鼠标右键事件**/ + $("body .ok-tab").contextMenu({ + width: 'auto', + itemHeight: 30, + menu: [ + { + text: "定位所在页", + icon: "ok-icon ok-icon-location", + callback: function () { + okTab.positionTab(); + } + }, + { + text: "关闭当前页", + icon: "ok-icon ok-icon-roundclose", + callback: function () { + okTab.tabClose(1); + } + }, + { + text: "关闭其他页", + icon: "ok-icon ok-icon-roundclose", + callback: function () { + okTab.tabClose(2); + } + }, + { + text: "关闭所有页", + icon: "ok-icon ok-icon-roundclose", + callback: 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"); - if (!$(this).attr("lay-id")) { - var topLevelEle = $(this).parents("li.layui-nav-item"); - var childs = $("#navBar > li > dl.layui-nav-child").not(topLevelEle.children("dl.layui-nav-child")); - childs.removeAttr("style"); - } - }); + okTab.tabClose(3); + } + } + ] + }); + }); - /** - * 左侧菜单展开动画 - */ - $("#navBar").on("click", ".layui-nav-item a", function () { - if (!$(this).attr("lay-id")) { - var superEle = $(this).parent(); - var ele = $(this).next('.layui-nav-child'); - var height = ele.height(); - ele.css({"display": "block"}); - // 是否是展开状态 - if (superEle.is(".layui-nav-itemed")) { - ele.height(0); - ele.animate({height: height + "px"}, function () { - ele.css({height: "auto"}); - }); - } else { - ele.animate({height: 0}, function () { - ele.removeAttr("style"); - }); - } - } - }); + /** + * 添加新窗口 + */ + $("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"); + if (!$(this).attr("lay-id")) { + var topLevelEle = $(this).parents("li.layui-nav-item"); + var childs = $("#navBar > li > dl.layui-nav-child").not(topLevelEle.children("dl.layui-nav-child")); + childs.removeAttr("style"); + } + }); - /** - * 左边菜单显隐功能 - */ - $(".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); - }); - - /** - * 移动端的处理事件 - */ - $("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"); - } - }); - - /** - * tab左右移动 - */ - $("body").on("click", ".okNavMove", function () { - var moveId = $(this).attr("data-id"); - var that = this; - okTab.navMove(moveId, that); - }); - - /** - * 刷新当前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]; - // 按 Esc - if (event && event.keyCode === 27) { - console.log("Esc"); - $("#fullScreen").children("i").eq(0).removeClass("okicon-screen-restore"); - } - // 按 F11 - if (event && event.keyCode == 122) { - $("#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"); - }); + /** + * 左侧菜单展开动画 + */ + $("#navBar").on("click", ".layui-nav-item a", function () { + if (!$(this).attr("lay-id")) { + var superEle = $(this).parent(); + var ele = $(this).next('.layui-nav-child'); + var height = ele.height(); + ele.css({"display": "block"}); + // 是否是展开状态 + if (superEle.is(".layui-nav-itemed")) { + ele.height(0); + ele.animate({height: height + "px"}, function () { + ele.css({height: "auto"}); + }); } else { - screenFun(1).then(function () { - $(this).children("i").eq(0).addClass("okicon-screen-restore"); - }); + ele.animate({height: 0}, function () { + ele.removeAttr("style"); + }); } - }); + } + }); - /** - * 全屏和退出全屏的方法 - * @param num 1代表全屏 2代表退出全屏 - * @returns {Promise} - */ - function screenFun(num) { - num = num || 1; - num = num * 1; - var docElm = document.documentElement; + /** + * 左边菜单显隐功能 + */ + $(".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); + }); - 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; + /** + * 移动端的处理事件 + */ + $("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"); + } + }); + + /** + * tab左右移动 + */ + $("body").on("click", ".okNavMove", function () { + var moveId = $(this).attr("data-id"); + var that = this; + okTab.navMove(moveId, that); + }); + + /** + * 刷新当前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]; + // 按 Esc + if (event && event.keyCode === 27) { + console.log("Esc"); + $("#fullScreen").children("i").eq(0).removeClass("okicon-screen-restore"); + } + // 按 F11 + if (event && event.keyCode == 122) { + $("#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 1代表全屏 2代表退出全屏 + * @returns {Promise} + */ + 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 () { + var notice = sessionStorage.getItem("notice"); + if (notice != "true") { + noticeFun(); + } + }(); + + function noticeFun() { + var srcWidth = okUtils.getBodyWidth(); + layer.open({ + type: 0, title: "系统公告", btn: "我知道啦", btnAlign: 'c', content: getContent(), + 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 + }); + } } + }); + } - return new Promise(function (res, rej) { - res("返回值"); + function getContent() { + let dateStr = okUtils.dateFormat(new Date(), "yyyy-MM-dd"); + let content = ""; + if (dateStr == "2018-12-30" || dateStr == "2018-12-31" || dateStr == "2019-01-01") { + content = "元旦，一年之始也。元，初，始也；旦，太阳微露地平一线，是为一日之始。值此新年之际，祝诸君快乐安康，如意吉祥！
" + + "ok-admin v2.0 祝您元旦节快乐！(^し^)"; + } else if (dateStr == "2019-02-04" || dateStr == "2019-02-05" || dateStr == "2019-02-06" || dateStr == "2019-02-07" || dateStr == "2019-02-08" || dateStr == "2019-02-09" || dateStr == "2019-02-10") { + content = "鞭炮声声迎新年，妙联横生贴门前。
" + + "笑声处处传入耳，美味佳肴上餐桌。
" + + "谈天论地成一片，灯光通明照残夜。
" + + "稚童新衣相夸耀，旧去新来气象清。
" + + "ok-admin v2.0 祝您春节快乐！(^し^)"; + } else if (dateStr == "2019-04-05" || dateStr == "2019-04-06" || dateStr == "2019-04-07") { + content = "清明时节雨纷纷，路上行人欲断魂。
" + + "借问酒家何处有，牧童遥指杏花村。
" + + "ok-admin v2.0 祝您清明节快乐！(^し^)"; + } else if (dateStr == "2019-05-01" || dateStr == "2019-05-02" || dateStr == "2019-05-03" || dateStr == "2019-05-04") { + content = "锄禾日当午，汗滴禾下土。
" + + "谁知盘中餐，粒粒皆辛苦。
" + + "ok-admin v2.0 祝您劳动节快乐！(^し^)"; + } else if (dateStr == "2019-06-07" || dateStr == "2019-06-08" || dateStr == "2019-06-09") { + content = "少年佳节倍多情，老去谁知感慨生。
" + + "不效艾符趋习俗，但祈蒲酒话升平。
" + + "鬓丝日日添白头，榴锦年年照眼明。
" + + "千载贤愚同瞬息，几人湮没几垂名。
" + + "ok-admin v2.0 祝您端午节安康！(^し^)"; + } else if (dateStr == "2019-09-13" || dateStr == "2019-09-14" || dateStr == "2019-09-15") { + content = "中庭地白树栖鸦，冷露无声湿桂花。
" + + "今夜月明人尽望，不知秋思落谁家。
" + + "ok-admin v2.0 祝您中秋节快乐！(^し^)"; + } else if (dateStr == "2019-09-18") { + content = "铭记九一八，让历史的风云鞭策我们奋进的脚步，让先烈的忠魂聆听我们自强的怒吼;
" + + "不忘九一八，让未来的发展见证华夏的崛起，让世界的目光聚焦中国的奇迹。
" + + "勿忘国耻，爱我中华，吾辈当自强！"; + } else if (dateStr == "2019-10-01" || dateStr == "2019-10-02" || dateStr == "2019-10-03" || dateStr == "2019-10-04" || dateStr == "2019-10-05" || dateStr == "2019-10-06" || dateStr == "2019-10-07") { + content = "龙跃甲子，鸽翱晴空，凤舞九天。
" + + "昔关河黍离，列强逐鹿；神州放眼，一鹤冲天。
" + + "重振社稷，举中流誓，今看东方盛世还。
" + + "黄河血，慨仁人志士，魂祭新篇。
" + + "华夏意气峥嵘，傲五湖四海锦绣满。
" + + "壮三山五岳，叠古风姿；九经三史，彰现华韵。
" + + "豪客泼墨，贤士铺卷，放歌九州富丽妍。
" + + "泰山脊，领风骚环宇，有谁堪比？
" + + "ok-admin v2.0 祝您国庆节快乐！
祝福伟大的祖国，越来越强大。
祝福强大的祖国，一直屹立于世界东方！(^し^)"; + } else { + content = "ok-admin v2.0上线啦(^し^)
" + + "在此郑重承诺该模板永久免费为大家提供
" + + "若有更好的建议欢迎加入QQ群一起聊"; + } + return content; + } + + /** + * 捐赠作者 + */ + $(".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: ["auto", "370px"], + tab: [{ + title: "QQ群2", + content: "" + }, { + title: "QQ群1（已满）", + content: "" + }] + }); + }); + + /** + * 弹窗皮肤 + */ + $("#alertSkin").click(function () { + okLayer.open("皮肤动画", "pages/system/alertSkin.html", "50%", "45%", function (layero) { + }, function () { + }); + }); + + /** + * 退出操作 + */ + $("#logout").click(function () { + okLayer.confirm("确定要退出吗？", function (index) { + window.location = "pages/login.html"; + }); + }); + + /** + * 锁定账户 + */ + $("#lock").click(function () { + okLayer.confirm("确定要锁定账户吗？", 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, time: 1000}); + } }); - } + }); + }); - /** - * 系统公告 - */ - $(document).on("click", "#notice", noticeFun); - !function () { - var notice = sessionStorage.getItem("notice"); - if (notice != "true") { - noticeFun(); - } - }(); - - function noticeFun() { - var srcWidth = okUtils.getBodyWidth(); - layer.open({ - type: 0, title: "系统公告", btn: "我知道啦", btnAlign: 'c', content: getContent(), - 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 - }); - } - } - }); - } - - function getContent() { - let dateStr = okUtils.dateFormat(new Date(), "yyyy-MM-dd"); - let content = ""; - if (dateStr == "2018-12-30" || dateStr == "2018-12-31" || dateStr == "2019-01-01") { - content = "元旦，一年之始也。元，初，始也；旦，太阳微露地平一线，是为一日之始。值此新年之际，祝诸君快乐安康，如意吉祥！
" + - "ok-admin v2.0 祝您元旦节快乐！(^し^)"; - } else if (dateStr == "2019-02-04" || dateStr == "2019-02-05" || dateStr == "2019-02-06" || dateStr == "2019-02-07" || dateStr == "2019-02-08" || dateStr == "2019-02-09" || dateStr == "2019-02-10") { - content = "鞭炮声声迎新年，妙联横生贴门前。
" + - "笑声处处传入耳，美味佳肴上餐桌。
" + - "谈天论地成一片，灯光通明照残夜。
" + - "稚童新衣相夸耀，旧去新来气象清。
" + - "ok-admin v2.0 祝您春节快乐！(^し^)"; - } else if (dateStr == "2019-04-05" || dateStr == "2019-04-06" || dateStr == "2019-04-07") { - content = "清明时节雨纷纷，路上行人欲断魂。
" + - "借问酒家何处有，牧童遥指杏花村。
" + - "ok-admin v2.0 祝您清明节快乐！(^し^)"; - } else if (dateStr == "2019-05-01" || dateStr == "2019-05-02" || dateStr == "2019-05-03" || dateStr == "2019-05-04") { - content = "锄禾日当午，汗滴禾下土。
" + - "谁知盘中餐，粒粒皆辛苦。
" + - "ok-admin v2.0 祝您劳动节快乐！(^し^)"; - } else if (dateStr == "2019-06-07" || dateStr == "2019-06-08" || dateStr == "2019-06-09") { - content = "少年佳节倍多情，老去谁知感慨生。
" + - "不效艾符趋习俗，但祈蒲酒话升平。
" + - "鬓丝日日添白头，榴锦年年照眼明。
" + - "千载贤愚同瞬息，几人湮没几垂名。
" + - "ok-admin v2.0 祝您端午节安康！(^し^)"; - } else if (dateStr == "2019-09-13" || dateStr == "2019-09-14" || dateStr == "2019-09-15") { - content = "中庭地白树栖鸦，冷露无声湿桂花。
" + - "今夜月明人尽望，不知秋思落谁家。
" + - "ok-admin v2.0 祝您中秋节快乐！(^し^)"; - } else if (dateStr == "2019-09-18") { - content = "铭记九一八，让历史的风云鞭策我们奋进的脚步，让先烈的忠魂聆听我们自强的怒吼;
" + - "不忘九一八，让未来的发展见证华夏的崛起，让世界的目光聚焦中国的奇迹。
" + - "勿忘国耻，爱我中华，吾辈当自强！"; - } else if (dateStr == "2019-10-01" || dateStr == "2019-10-02" || dateStr == "2019-10-03" || dateStr == "2019-10-04" || dateStr == "2019-10-05" || dateStr == "2019-10-06" || dateStr == "2019-10-07") { - content = "龙跃甲子，鸽翱晴空，凤舞九天。
" + - "昔关河黍离，列强逐鹿；神州放眼，一鹤冲天。
" + - "重振社稷，举中流誓，今看东方盛世还。
" + - "黄河血，慨仁人志士，魂祭新篇。
" + - "华夏意气峥嵘，傲五湖四海锦绣满。
" + - "壮三山五岳，叠古风姿；九经三史，彰现华韵。
" + - "豪客泼墨，贤士铺卷，放歌九州富丽妍。
" + - "泰山脊，领风骚环宇，有谁堪比？
" + - "ok-admin v2.0 祝您国庆节快乐！
祝福伟大的祖国，越来越强大。
祝福强大的祖国，一直屹立于世界东方！(^し^)"; - } else { - content = "ok-admin v2.0上线啦(^し^)
" + - "在此郑重承诺该模板永久免费为大家提供
" + - "若有更好的建议欢迎加入QQ群一起聊"; - } - return content; - } - - /** - * 捐赠作者 - */ - $(".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: ["auto", "370px"], - tab: [{ - title: "QQ群2", - content: "" - }, { - title: "QQ群1（已满）", - content: "" - }] - }); - }); - - /** - * 弹窗皮肤 - */ - $("#alertSkin").click(function () { - okLayer.open("皮肤动画", "pages/system/alertSkin.html", "50%", "45%", function (layero) { - }, function () { - }); - }); - - /** - * 退出操作 - */ - $("#logout").click(function () { - okLayer.confirm("确定要退出吗？", function (index) { - window.location = "pages/login.html"; - }); - }); - - /** - * 锁定账户 - */ - $("#lock").click(function () { - okLayer.confirm("确定要锁定账户吗？", 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, time: 1000}); - } - }); - }); - }); - - console.log(" __ .___ .__ \n" + - " ____ | | __ _____ __| _/_____ |__| ____ \n" + - " / _ \\| |/ / ______ \\__ \\ / __ |/ \\| |/ \\ \n" + - "( <_> ) < /_____/ / __ \\_/ /_/ | Y Y \\ | | \\\n" + - " \\____/|__|_ \\ (____ /\\____ |__|_| /__|___| /\n" + - " \\/ \\/ \\/ \\/ \\/\n" + - "" + - "版本：v2.0\n" + - "作者：bobi\n" + - "邮箱：bobi1234@foxmail.com\n" + - "企鹅：833539807\n" + - "描述：一个很赞的，扁平化风格的，响应式布局的后台管理模版，旨为后端程序员减压！"); + console.log(" __ .___ .__ \n" + + " ____ | | __ _____ __| _/_____ |__| ____ \n" + + " / _ \\| |/ / ______ \\__ \\ / __ |/ \\| |/ \\ \n" + + "( <_> ) < /_____/ / __ \\_/ /_/ | Y Y \\ | | \\\n" + + " \\____/|__|_ \\ (____ /\\____ |__|_| /__|___| /\n" + + " \\/ \\/ \\/ \\/ \\/\n" + + "" + + "版本：v2.0\n" + + "作者：bobi\n" + + "邮箱：bobi1234@foxmail.com\n" + + "企鹅：833539807\n" + + "描述：一个很赞的，扁平化风格的，响应式布局的后台管理模版，旨为后端程序员减压！"); }); diff --git a/lib/layui/lay/okmodules/jQContextMenu.js b/lib/layui/lay/okmodules/jQContextMenu.js new file mode 100644 index 0000000..13c8c92 --- /dev/null +++ b/lib/layui/lay/okmodules/jQContextMenu.js @@ -0,0 +1,64 @@ +layui.define(['jquery'], function (exports) { + var jQuery = layui.jquery; + !function (t, n, e, i) { + var o = function (t, n) { + this.init(t, n) + }; + o.prototype = { + init: function (t, n) { + this.ele = t, this.defaults = { + menu: [{ + text: "菜单一", callback: function () { + } + }, { + text: "菜单二", callback: function () { + } + }], target: function (t) { + }, width: 100, itemHeight: 28, bgColor: "#fff", color: "#333", fontSize: 14, hoverBgColor: "#f5f5f5" + }, this.opts = e.extend(!0, {}, this.defaults, n), this.random = (new Date).getTime() + parseInt(1e3 * Math.random()), this.eventBind() + }, renderMenu: function () { + var t = this, n = "#uiContextMenu_" + this.random; + if (!(e(n).length > 0)) { + var t = this, i = '", e("body").append(i).find(".ul-context-menu").hide(), this.initStyle(n), e(n).on("click", ".ui-context-menu-item", function (n) { + t.menuItemClick(e(this)), n.stopPropagation() + }) + } + }, initStyle: function (t) { + var n = this.opts; + e(t).css({width: n.width, backgroundColor: n.bgColor}).find(".ui-context-menu-item a").css({ + color: n.color, + fontSize: n.fontSize, + height: n.itemHeight, + lineHeight: n.itemHeight + "px" + }).hover(function () { + e(this).css({backgroundColor: n.hoverBgColor}) + }, function () { + e(this).css({backgroundColor: n.bgColor}) + }) + }, menuItemClick: function (t) { + var n = this, e = t.index(); + t.parent(".ul-context-menu").hide(), n.opts.menu[e].callback && "function" == typeof n.opts.menu[e].callback && n.opts.menu[e].callback() + }, setPosition: function (t) { + e("#uiContextMenu_" + this.random).css({left: t.clientX + 2, top: t.clientY + 2}).show() + }, eventBind: function () { + var t = this; + this.ele.on("contextmenu", function (n) { + n.preventDefault(), t.renderMenu(), t.setPosition(n), t.opts.target && "function" == typeof t.opts.target && t.opts.target(e(this)) + }), e(n).on("click", function () { + e(".ul-context-menu").hide() + }) + } + }, e.fn.contextMenu = function (t) { + return new o(this, t), this + } + }(window, document, jQuery); + exports('jQContextMenu', function (obj) { + + }); +}); + diff --git a/lib/layui/lay/okmodules/okTab.js b/lib/layui/lay/okmodules/okTab.js index 072c12d..1aa7bce 100644 --- a/lib/layui/lay/okmodules/okTab.js +++ b/lib/layui/lay/okmodules/okTab.js @@ -175,8 +175,8 @@ layui.define(["element", "jquery"], function (exports) { okTab.prototype.positionTab = function (contEle, ele) { var superEle = $(".ok-tab");//父级元素 - contEle = $(contEle);//tab内容存放的父元素 - ele = $(ele);//当前的tab + contEle = contEle ? $(contEle) : $("#tabTitle");//(contEle);//tab内容存放的父元素 + ele = ele ? $(ele) : $("#tabTitle li.layui-this");//当前的tab var menuSet = $("#navBar a[lay-id]");//获取所有菜单集合 var thatLayId = ele.attr('lay-id'); diff --git a/lib/layui/layui.js b/lib/layui/layui.js index edfe7c5..7064d58 100644 --- a/lib/layui/layui.js +++ b/lib/layui/layui.js @@ -35,6 +35,7 @@ if (!Object.assign) { "okAddlink": "okmodules/okAddlink", "okLayer": "okmodules/okLayer", "okMock": "okmodules/okMock", + "jQContextMenu": "okmodules/jQContextMenu", }; var modulePath = Object.assign({ layer: "modules/layer",