From 2de88e9c7d796d0d2252d07c603f45c7689a3cf1 Mon Sep 17 00:00:00 2001 From: bobi Date: Sun, 27 Oct 2019 23:10:20 +0800 Subject: [PATCH] add:okUtils.html --- README.md | 2 +- data/navs.json | 18 ++++--- js/okadmin.js | 70 ++++++++++++------------- lib/layui/lay/okmodules/okUtils.js | 6 +-- pages/help/okUtils.html | 82 ++++++++++++++++++++++++++++++ pages/member/permission.html | 2 +- 6 files changed, 132 insertions(+), 48 deletions(-) create mode 100644 pages/help/okUtils.html diff --git a/README.md b/README.md index 852b340..ea26bbb 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ ### QQ群交流 -964222534 +833539807 ### 技术栈 diff --git a/data/navs.json b/data/navs.json index ba494e9..7c3665c 100644 --- a/data/navs.json +++ b/data/navs.json @@ -161,12 +161,12 @@ "icon": "", "spread": false }, - { - "title": "帖子列表", - "href": "pages/often/bbs.html", - "icon": "", - "spread": false - } + { + "title": "帖子列表", + "href": "pages/often/bbs.html", + "icon": "", + "spread": false + } ] }, { @@ -382,6 +382,12 @@ "href": "pages/help/nav_parameter.html", "icon": "", "spread": false + }, + { + "title": "okUtils", + "href": "pages/help/okUtils.html", + "icon": "", + "spread": false } ] }, diff --git a/js/okadmin.js b/js/okadmin.js index 8c4b646..78f3fbe 100644 --- a/js/okadmin.js +++ b/js/okadmin.js @@ -8,9 +8,12 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () { var okLayer = layui.okLayer; var okTab = layui.okTab({ + // 菜单请求路径 url: "data/navs.json", - openTabNum: 30, // 允许同时选项卡的个数 - parseData: function (data) { // 如果返回的结果和navs.json中的数据结构一致可省略这个方法 + // 允许同时选项卡的个数 + openTabNum: 30, + // 如果返回的结果和navs.json中的数据结构一致可省略这个方法 + parseData: function (data) { return data; } }); @@ -25,45 +28,38 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () { /** * 添加新窗口 */ - $("body").on("click", "#navBar .layui-nav-item a,#userInfo a", 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')) { + 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'); + childs.removeAttr("style"); } }); /** * 左侧菜单展开动画 */ - $("#navBar").on('click', '.layui-nav-item a', function () { - if (!$(this).attr('lay-id')) { + $("#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.css({"display": "block"}); + // 是否是展开状态 + if (superEle.is(".layui-nav-itemed")) { ele.height(0); - ele.animate({ - height: height + 'px' - }, function () { - ele.css({ - height: "auto" - }); - //ele.removeAttr('style'); + ele.animate({height: height + "px"}, function () { + ele.css({height: "auto"}); }); } else { - ele.animate({ - height: 0 - }, function () { - ele.removeAttr('style'); + ele.animate({height: 0}, function () { + ele.removeAttr("style"); }); } } @@ -74,7 +70,7 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () { */ $(".ok-menu").click(function () { $(".layui-layout-admin").toggleClass("ok-left-hide"); - $(this).find('i').toggleClass("ok-menu-hide"); + $(this).find("i").toggleClass("ok-menu-hide"); localStorage.setItem("isResize", false); setTimeout(function () { localStorage.setItem("isResize", true); @@ -84,7 +80,7 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () { /** * 移动端的处理事件 */ - $("body").on("click", ".layui-layout-admin .ok-left a[data-url],.ok-make", function () { + $("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"); @@ -111,7 +107,7 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () { * 关闭tab页 */ $("body").on("click", "#tabAction a", function () { - var num = $(this).attr('data-num'); + var num = $(this).attr("data-num"); okTab.tabClose(num); }); @@ -121,7 +117,7 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () { $("body").on("keydown", function (event) { event = event || window.event || arguments.callee.caller.arguments[0]; // 按 Esc - if (event && event.keyCode == 27) { + if (event && event.keyCode === 27) { console.log("Esc"); $("#fullScreen").children("i").eq(0).removeClass("okicon-screen-restore"); } @@ -341,16 +337,16 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer"], function () { }); }); - console.log(" _ _ _ \n" + - " | | | | (_) \n" + - " ___ | | _ _____ _____ __| |____ _ ____ \n" + - " / _ \\| |_/ |_____|____ |/ _ | \\| | _ \\ \n" + - "| |_| | _ ( / ___ ( (_| | | | | | | | |\n" + - " \\___/|_| \\_) \\_____|\\____|_|_|_|_|_| |_|\n" + - " \n" + - "版本：v2.0\n" + - "作者：bobi\n" + - "邮箱：bobi1234@foxmail.com\n" + - "企鹅：964222534\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/okUtils.js b/lib/layui/lay/okmodules/okUtils.js index 708dd34..7ba54ce 100644 --- a/lib/layui/lay/okmodules/okUtils.js +++ b/lib/layui/lay/okmodules/okUtils.js @@ -34,17 +34,17 @@ layui.define(["layer"], function (exprots) { * ajax()函数二次封装 * @param url * @param type - * @param param + * @param params * @param load * @returns {*|never|{always, promise, state, then}} */ - ajax: function (url, type, param, load) { + ajax: function (url, type, params, load) { var deferred = $.Deferred(); var loadIndex; $.ajax({ url: okUtils.isFrontendBackendSeparate ? okUtils.baseUrl + url : url, type: type || "get", - data: param || {}, + data: params || {}, dataType: "json", beforeSend: function () { if (load) { diff --git a/pages/help/okUtils.html b/pages/help/okUtils.html new file mode 100644 index 0000000..148f245 --- /dev/null +++ b/pages/help/okUtils.html @@ -0,0 +1,82 @@ + + + + + okUtils + + + + + +
+
+

主要讲述如何okUtils封装的工具类使用方法。

+
+ +
+ okUtils.ajax(url, type, params, load); +
+ 
+okUtils.ajax("/permission/tree", "get", null, true).done(function (response) {
+    console.log(response);
+}).fail(function (error) {
+    console.log(error);
+});
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
参数类型描述
urlString请求路径
typeString请求类型
paramsString请求参数
loadBoolean是否显示loading
+
+ + + + diff --git a/pages/member/permission.html b/pages/member/permission.html index fe0e60c..f197133 100644 --- a/pages/member/permission.html +++ b/pages/member/permission.html @@ -53,7 +53,7 @@ laydate.render({elem: '#endTime', type: "datetime"}); function initPermissionTree() { - okUtils.ajax("/permission/tree", "get", null).done(function (response) { + okUtils.ajax("/permission/tree", "get", null, true).done(function (response) { tree.render({ elem: '#permissionTree', data: response.data,