root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

调整代码结构

develop
就眠仪式 2020-07-17 08:29:38 +08:00
parent cb67d1f285
commit 536c36244a
8 changed files with 333 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
admin/data/menu.json
View File

@ -41,6 +41,14 @@
"type": 1,
"openType": "_iframe",
"href": "view/document/select.html"
},
{
"id": 203,
"title": "抽屉组件",
"icon": "layui-icon layui-icon-face-cry",
"type": 1,
"openType": "_iframe",
"href": "view/document/drawer.html"
}
]
},

180
component/pear/module/drawer.js Normal file
View File

@ -0,0 +1,180 @@
layui.define(['jquery', 'element'], function(exports) {
"use strict";
var MOD_NAME = 'drawer',
$ = layui.jquery,
element = layui.element;
var drawer = new function() {
this.open = function(option) {
var _right = new mSlider({
dom: option.dom,
direction: option.direction,
distance: option.distance,
time:option.time,
maskClose:option.maskClose
});
_right.open();
return _right;
}
}
exports(MOD_NAME,drawer);
});
(function(b, c) {
function a(d) {
this.opts = {
"direction": d.direction || "left",
"distance": d.distance || "60%",
"dom": this.Q(d.dom),
"time": d.time || "",
"maskClose": (d.maskClose + "").toString() !== "false" ? true : false,
"callback": d.callback || ""
};
this.rnd = this.rnd();
this.dom = this.opts.dom[0];
this.wrap = "";
this.inner = "";
this.mask = "";
this.init()
}
a.prototype = {
Q: function(d) {
return document.querySelectorAll(d)
},
isMobile: function() {
return navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i) ? true : false
},
addEvent: function(f, e, d) {
if (f.attachEvent) {
f.attachEvent("on" + e, d)
} else {
f.addEventListener(e, d, false)
}
},
rnd: function() {
return Math.random().toString(36).substr(2, 6)
},
init: function() {
var g = this;
if (!g.dom) {
console.log("未正确绑定弹窗容器");
return
}
var d = document.createElement("div");
var e = document.createElement("div");
var f = document.createElement("div");
d.setAttribute("class", "mSlider-main ms-" + g.rnd);
e.setAttribute("class", "mSlider-inner");
f.setAttribute("class", "mSlider-mask");
g.Q("body")[0].appendChild(d);
g.Q(".ms-" + g.rnd)[0].appendChild(e);
g.Q(".ms-" + g.rnd)[0].appendChild(f);
g.wrap = g.Q(".ms-" + g.rnd)[0];
g.inner = g.Q(".ms-" + g.rnd + " .mSlider-inner")[0];
g.mask = g.Q(".ms-" + g.rnd + " .mSlider-mask")[0];
g.inner.appendChild(g.dom);
switch (g.opts.direction) {
case "top":
g.top = "0";
g.left = "0";
g.width = "100%";
g.height = g.opts.distance;
g.translate = "0,-100%,0";
break;
case "bottom":
g.bottom = "0";
g.left = "0";
g.width = "100%";
g.height = g.opts.distance;
g.translate = "0,100%,0";
break;
case "right":
g.top = "0";
g.right = "0";
g.width = g.opts.distance;
g.height = document.documentElement.clientHeight + "px";
g.translate = "100%,0,0";
break;
default:
g.top = "0";
g.left = "0";
g.width = g.opts.distance;
g.height = document.documentElement.clientHeight + "px";
g.translate = "-100%,0,0"
}
g.wrap.style.display = "none";
g.wrap.style.position = "fixed";
g.wrap.style.top = "0";
g.wrap.style.left = "0";
g.wrap.style.width = "100%";
g.wrap.style.height = "100%";
g.wrap.style.zIndex = 99;
g.inner.style.position = "absolute";
g.inner.style.top = g.top;
g.inner.style.bottom = g.bottom;
g.inner.style.left = g.left;
g.inner.style.right = g.right;
g.inner.style.width = g.width;
g.inner.style.height = g.height;
g.inner.style.backgroundColor = "#fff";
g.inner.style.transform = "translate3d(" + g.translate + ")";
g.inner.style.webkitTransition = "all .2s ease-out";
g.inner.style.transition = "all .2s ease-out";
g.inner.style.zIndex = 100;
g.mask.style.width = "100%";
g.mask.style.height = "100%";
g.mask.style.opacity = "0";
g.mask.style.backgroundColor = "black";
g.mask.style.zIndex = "98";
g.mask.style.webkitTransition = "all .2s ease-out";
g.mask.style.transition = "all .2s ease-out";
g.mask.style.webkitBackfaceVisibility = "hidden";
g.events()
},
open: function() {
var d = this;
d.wrap.style.display = "block";
setTimeout(function() {
d.inner.style.transform = "translate3d(0,0,0)";
d.inner.style.webkitTransform = "translate3d(0,0,0)";
d.mask.style.opacity = 0.5
}, 30);
if (d.opts.time) {
d.timer = setTimeout(function() {
d.close()
}, d.opts.time)
}
},
close: function() {
var d = this;
d.timer && clearTimeout(d.timer);
d.inner.style.webkitTransform = "translate3d(" + d.translate + ")";
d.inner.style.transform = "translate3d(" + d.translate + ")";
d.mask.style.opacity = 0;
setTimeout(function() {
d.wrap.style.display = "none";
d.timer = null;
d.opts.callback && d.opts.callback()
}, 300)
},
events: function() {
var d = this;
d.addEvent(d.mask, "touchmove", function(f) {
f.preventDefault()
});
d.addEvent(d.mask, (d.isMobile() ? "touchend" : "click"), function(f) {
if (d.opts.maskClose) {
d.close()
}
})
}
};
b.mSlider = a
})(window);

3
component/pear/pear.all.js
View File

@ -15,5 +15,6 @@ layui.config({
echartsTheme: "echartsTheme",
hash: "hash",
document: "document",
select: "select"
select: "select",
drawer: "drawer"
});

31
component/pear/pear.js
View File

@ -1,19 +1,20 @@
window.rootPath = (function (src) {
src = document.scripts[document.scripts.length - 1].src;
return src.substring(0, src.lastIndexOf("/") + 1);
window.rootPath = (function(src) {
src = document.scripts[document.scripts.length - 1].src;
return src.substring(0, src.lastIndexOf("/") + 1);
})();
layui.config({
base: rootPath + "module/",
version: true
base: rootPath + "module/",
version: true
}).extend({
admin: "admin",
menu:"menu",
frame:"frame",
tab:"tab",
echarts:"echarts",
echartsTheme:"echartsTheme",
hash:"hash",
document:"document",
select:"select"
});
admin: "admin",
menu: "menu",
frame: "frame",
tab: "tab",
echarts: "echarts",
echartsTheme: "echartsTheme",
hash: "hash",
document: "document",
select: "select",
drawer: "drawer"
});

2
index.html
View File

@ -27,7 +27,7 @@
<li class="layui-nav-item">
<a href="javascript:;">
<img src="admin/images/avatar.jpg" class="layui-nav-img">
就眠仪式
就眠仪式
</a>
<dl class="layui-nav-child">
<dd><a href="">基本资料</a></dd>

1
view/document/button.html
View File

@ -44,7 +44,6 @@
</div>
</div>
</div>
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">

125
view/document/drawer.html Normal file
View File

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="../../component/pear/css/pear.css" rel="stylesheet" />
<style>
.wrap {
display: none;
}
</style>
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-header">抽屉</div>
<div class="layui-card-body">
<button class="drawer-top pear-btn pear-btn-primary">上</button>
<button class="drawer-bottom pear-btn pear-btn-success">下</button>
<button class="drawer-left pear-btn pear-btn-warming">左</button>
<button class="drawer-right pear-btn pear-btn-danger">右</button>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">更多</div>
<div class="layui-card-body">
<button class="drawer-open-mask pear-btn pear-btn-primary">开启遮盖层</button>
<button class="drawer-close-mask pear-btn pear-btn-primary">关闭遮盖层</button>
</div>
</div>
<div class="wrap">
<div class="layer-left">
<h3>左侧弹层内容...</h3>
</div>
<div class="layer-right">
<h3>右侧弹层内容...</h3>
</div>
<div class="layer-top">
<h3>上侧弹层内容...</h3>
</div>
<div class="layer-bottom">
<h3>下侧弹层内容...</h3>
</div>
<div class="layer-open-mask">
<h3>点击右侧灰色区域
</h3>
</div>
<div class="layer-close-mask">
<button id="btnClose" class="pear-btn pear-btn-primary" style="position: absolute; bottom: 10px;left: 10px;">关闭抽屉</button>
</div>
</div>
</body>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['element', 'jquery', 'drawer', 'code'], function() {
var element = layui.element;
var $ = layui.jquery;
var drawer = layui.drawer;
$(".drawer-right").click(function() {
drawer.open({
direction: "right",
dom: ".layer-top",
distance: "30%"
});
})
$(".drawer-left").click(function() {
drawer.open({
direction: "left",
dom: ".layer-left",
distance: "30%"
});
})
$(".drawer-top").click(function() {
drawer.open({
direction: "top",
dom: ".layer-right",
distance: "30%"
});
})
$(".drawer-bottom").click(function() {
drawer.open({
direction: "bottom",
dom: ".layer-bottom",
distance: "30%"
});
})
$(".drawer-open-mask").click(function() {
drawer.open({
direction: "right",
dom: ".layer-open-mask",
distance: "30%",
maskClose: true
});
})
var dom;
$(".drawer-close-mask").click(function() {
dom = drawer.open({
direction: "right",
dom: ".layer-close-mask",
distance: "30%",
maskClose: false
});
})
$("#btnClose").click(function() {
dom.close();
})
})
</script>
</html>

18
view/document/select.html
View File

@ -8,9 +8,7 @@
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-header">
</div>
<div class="layui-card-body">
<select name="city4" xm-select="select4" xm-select-skin="default">
@ -21,14 +19,10 @@
<option value="5">天津</option>
</select>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">
</div>
<div class="layui-card-body">
<select name="city1" xm-select="select1">
<option value="1">北京</option>
@ -43,9 +37,7 @@
<div class="layui-card">
<div class="layui-card-header">
</div>
<div class="layui-card-body">
<select name="city2" xm-select="select2" xm-select-skin="normal">
<option value="1">北京</option>
@ -54,17 +46,13 @@
<option value="4" selected="selected">深圳</option>
<option value="5">天津</option>
</select>
</div>
</div
</div>
<div class="layui-card">
<div class="layui-card-header">
</div>
<div class="layui-card-body">
<select name="city3" xm-select="select3" xm-select-skin="warm">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>
@ -73,16 +61,12 @@
<option value="5">天津</option>
</select>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">
</div>
<div class="layui-card-body">
<select name="city4" xm-select="select4" xm-select-skin="danger">
<option value="1">北京</option>
<option value="2" selected="selected">上海</option>