root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add:okUtils.html

master
bobi 2019-10-27 23:10:20 +08:00
parent 33d2f7c8e4
commit 2de88e9c7d
6 changed files with 132 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -4,7 +4,7 @@
### QQ群交流
964222534
833539807
### 技术栈

18
data/navs.json
View File

@ -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
}
]
},

70
js/okadmin.js
View File

@ -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" +
"描述：一个很赞的，扁平化风格的，响应式布局的后台管理模版，旨为后端程序员减压！");
});

6
lib/layui/lay/okmodules/okUtils.js
View File

@ -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) {

82
pages/help/okUtils.html Normal file
View File

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>okUtils</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
<style>
.ok-body {
padding: 20px;
}
</style>
</head>
<body>
<div class="ok-body">
<blockquote class="layui-elem-quote">
<p>主要讲述如何okUtils封装的工具类使用方法。</p>
</blockquote>
<!--1、okUtils.ajax-->
<blockquote class="layui-elem-quote layui-quote-nm">
okUtils.ajax(url, type, params, load);
</blockquote>
<pre>
okUtils.ajax("/permission/tree", "get", null, true).done(function (response) {
console.log(response);
}).fail(function (error) {
console.log(error);
});
</pre>
<table class="layui-table">
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td>String</td>
<td>请求路径</td>
</tr>
<tr>
<td>type</td>
<td>String</td>
<td>请求类型</td>
</tr>
<tr>
<td>params</td>
<td>String</td>
<td>请求参数</td>
</tr>
<tr>
<td>load</td>
<td>Boolean</td>
<td>是否显示loading</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script src="../../lib/layui/layui.js"></script>
<script type="text/javascript">
layui.use(["util", "code"], function () {
let util = layui.util;
let code = layui.code;
util.fixbar({});
code({
elem: 'pre',
title: "代码示例"
});
});
</script>

2
pages/member/permission.html
View File

@ -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,