重构 抽屉 组件 完善 抽屉 文档
就眠仪式
parent
9b586d2d32
commit
d162ba1cb4
|
|
@ -0,0 +1,181 @@
|
|||
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?option.time:0,
|
||||
maskClose:option.maskClose,
|
||||
callback:option.success
|
||||
});
|
||||
|
||||
_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);
|
||||
|
|
@ -62,6 +62,7 @@
|
|||
pearStep:"extends/pearStep",
|
||||
pearArea:"extends/pearArea",
|
||||
tinymce:"extends/tinymce/tinymce",
|
||||
drawer:"extends/drawer",
|
||||
echarts:"extends/echarts",
|
||||
echartsTheme:"extends/echartsTheme",
|
||||
formSelects:'extends/formSelects-v4',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,169 @@
|
|||
/** Buttom 默认*/
|
||||
.pear-btn {
|
||||
display: inline-block;
|
||||
line-height: 38px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #606266;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
transition: 0.1s;
|
||||
font-weight: 500;
|
||||
padding: 0 18px;
|
||||
height: 38px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pear-btn i {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pear-btn:hover {
|
||||
opacity: .8;
|
||||
filter: alpha(opacity=80);
|
||||
color: #409eff;
|
||||
border-color: #c6e2ff;
|
||||
background-color: #ECF5FF;
|
||||
}
|
||||
|
||||
.pear-btn-danger,
|
||||
.pear-btn-warming,
|
||||
.pear-btn-success,
|
||||
.pear-btn-primary {
|
||||
color: #fff !important
|
||||
}
|
||||
|
||||
.pear-btn[dashed] {
|
||||
border-style: dashed !important;
|
||||
}
|
||||
|
||||
/** Button 主题 */
|
||||
.pear-btn-primary {
|
||||
background-color: #2D8CF0 !important;
|
||||
}
|
||||
|
||||
.pear-btn-danger {
|
||||
background-color: #f56c6c !important
|
||||
}
|
||||
|
||||
.pear-btn-warming {
|
||||
background-color: #e6a23c !important
|
||||
}
|
||||
|
||||
.pear-btn-success {
|
||||
background-color: #67c23a !important
|
||||
}
|
||||
|
||||
.pear-btn[round] {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.pear-btn-primary[plain] {
|
||||
color: #409eff !important;
|
||||
background: #ecf5ff !important;
|
||||
border-color: #b3d8ff !important;
|
||||
}
|
||||
|
||||
.pear-btn-primary[plain]:hover {
|
||||
color: #fff !important;
|
||||
background-color: #2d8cf0 !important
|
||||
}
|
||||
|
||||
.pear-btn-success[plain] {
|
||||
color: #67c23a !important;
|
||||
background: #f0f9eb !important;
|
||||
border-color: #c2e7b0 !important;
|
||||
}
|
||||
|
||||
.pear-btn-success[plain]:hover {
|
||||
color: white !important;
|
||||
background-color: #67c23a !important
|
||||
}
|
||||
|
||||
.pear-btn-warming[plain] {
|
||||
color: #e6a23c !important;
|
||||
background: #fdf6ec !important;
|
||||
border-color: #f5dab1 !important;
|
||||
}
|
||||
|
||||
.pear-btn-warming[plain]:hover {
|
||||
color: white !important;
|
||||
background-color: #e6a23c !important
|
||||
}
|
||||
|
||||
.pear-btn-danger[plain] {
|
||||
color: #f56c6c !important;
|
||||
background: #fef0f0 !important;
|
||||
border-color: #fbc4c4 !important;
|
||||
}
|
||||
|
||||
.pear-btn-danger[plain]:hover {
|
||||
color: white !important;
|
||||
background-color: #f56c6c !important
|
||||
}
|
||||
|
||||
/** Button Group */
|
||||
.pear-btn-group {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.pear-btn-group .pear-btn {
|
||||
float: left;
|
||||
position: relative;
|
||||
border-radius: 0px;
|
||||
|
||||
}
|
||||
|
||||
.pear-btn-md {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
padding: 0 10px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.pear-btn-group .pear-btn:first-child {
|
||||
border-top-left-radius: 4px !important;
|
||||
border-bottom-left-radius: 4px !important;
|
||||
}
|
||||
|
||||
.pear-btn-group .pear-btn:last-child {
|
||||
border-top-right-radius: 4px !important;
|
||||
border-bottom-right-radius: 4px !important;
|
||||
}
|
||||
|
||||
.pear-btn-group .pear-btn[round]:first-child {
|
||||
border-top-left-radius: 50px !important;
|
||||
border-bottom-left-radius: 50px !important;
|
||||
}
|
||||
|
||||
.pear-btn-group .pear-btn[round]:last-child {
|
||||
border-top-right-radius: 50px !important;
|
||||
border-bottom-right-radius: 50px !important;
|
||||
}
|
||||
|
||||
/** Button Size*/
|
||||
.pear-btn-sm {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pear-btn-xs {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
padding: 0 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pear-btn-lg {
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding: 0 25px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.layui-colla-content{
|
||||
padding: 0px;
|
||||
}
|
||||
.layui-code-view{
|
||||
margin: 0px!important;
|
||||
}
|
||||
.layui-code-h3{
|
||||
display: none!important;
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
.pear-container{
|
||||
margin: 10px;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-track {
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background: #E6E6E6;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb:hover {
|
||||
background: #E6E6E6;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-corner {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
@import url("../../layui/css/layui.css");
|
||||
|
||||
@import url("module/button.css");
|
||||
@import url("module/code.css");
|
||||
@import url("module/layout.css");
|
||||
|
|
@ -3,90 +3,292 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../../../component/layui/css/layui.css" />
|
||||
<link rel="stylesheet" href="../../../component/notiflix/notiflix-2.0.0.css"/>
|
||||
<link rel="stylesheet" href="../../../admin/css/pearButton.css"/>
|
||||
<link rel="stylesheet" href="../../../admin/css/pearOper.css"/>
|
||||
<link href="../../../component/pear/css/pear.css" rel="stylesheet" />
|
||||
<style>
|
||||
.pear-container{
|
||||
background-color: whitesmoke;
|
||||
margin: 10px;
|
||||
}
|
||||
</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">
|
||||
<div>
|
||||
<span>pearOper.drawer("top",".layer-top","30%")</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>pearOper.drawer("bottom",".layer-bottom","30%")</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>pearOper.drawer("left",".layer-left","30%")</span>
|
||||
<br>
|
||||
<br>
|
||||
<span>pearOper.drawer("right",".layer-right","30%")</span>
|
||||
<br>
|
||||
<br>
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">开发环境</div>
|
||||
<div class="layui-card-body">
|
||||
Drawer 在 弹出层 UI 上带来不一样的体验.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">显示代码</h2>
|
||||
<div class="layui-colla-content">
|
||||
<pre class="layui-code" lay-encode="true">
|
||||
<script src="component/layui/layui.js"></script>
|
||||
并
|
||||
<script src="component/pear/pear.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<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>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">显示代码</h2>
|
||||
<div class="layui-colla-content">
|
||||
<pre class="layui-code" lay-encode="true">
|
||||
layui.use(['drawer'], function() {
|
||||
var drawer = layui.drawer;
|
||||
|
||||
drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-top",
|
||||
distance: "30%"
|
||||
});
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">进阶</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="drawer-close-mask pear-btn pear-btn-primary">手动关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">显示代码</h2>
|
||||
<div class="layui-colla-content">
|
||||
<pre class="layui-code" lay-encode="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();
|
||||
})
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">扩展</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="drawer-auto-close pear-btn pear-btn-success">自动关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">显示代码</h2>
|
||||
<div class="layui-colla-content">
|
||||
<pre class="layui-code" lay-encode="true">
|
||||
layui.use(['drawer'], function() {
|
||||
var drawer = layui.drawer;
|
||||
|
||||
$(".drawer-auto-close").click(function() {
|
||||
dom = drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-auto-close",
|
||||
distance: "30%",
|
||||
maskClose: false,
|
||||
time: 1000
|
||||
});
|
||||
})
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">扩展</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="drawer-call-back pear-btn pear-btn-success">回调函数</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">显示代码</h2>
|
||||
<div class="layui-colla-content">
|
||||
<pre class="layui-code" lay-encode="true">
|
||||
layui.use(['drawer'], function() {
|
||||
var drawer = layui.drawer;
|
||||
|
||||
$(".drawer-auto-close").click(function() {
|
||||
dom = drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-auto-close",
|
||||
distance: "30%",
|
||||
success:function(){
|
||||
layer.msg("触发回调函数")；
|
||||
}
|
||||
});
|
||||
})
|
||||
})
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="drawer-top pear-btn pear-btn-primary" plain>上</button>
|
||||
<button class="drawer-bottom pear-btn pear-btn-primary" plain>下</button>
|
||||
<button class="drawer-left pear-btn pear-btn-primary" plain>左</button>
|
||||
<button class="drawer-right pear-btn pear-btn-primary" plain>右</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="layer-right">
|
||||
|
||||
<div class="wrap">
|
||||
<div class="layer-left">
|
||||
<br />
|
||||
<h3>左侧弹层内容...</h3>
|
||||
</div>
|
||||
<div class="layer-right">
|
||||
<br />
|
||||
<h3>右侧弹层内容...</h3>
|
||||
</div>
|
||||
<div class="layer-top">
|
||||
<br />
|
||||
<h3>上侧弹层内容...</h3>
|
||||
</div>
|
||||
<div class="layer-bottom">
|
||||
<br />
|
||||
<h3>下侧弹层内容...</h3>
|
||||
</div>
|
||||
|
||||
<div class="layer-open-mask">
|
||||
<br />
|
||||
<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 class="layer-auto-close">
|
||||
<br />
|
||||
<h3>打开 2秒 后自动关闭...</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="../../../component/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use(['element','jquery','pearOper','code'],function(){
|
||||
var element = layui.element;
|
||||
var $ = layui.jquery;
|
||||
var pearOper = layui.pearOper;
|
||||
|
||||
var msg = '"Do not try to become a person of success but try to become a person of value." <br><br>- Albert Einstein'
|
||||
|
||||
|
||||
$(".drawer-right").click(function(){
|
||||
|
||||
pearOper.drawer("right",".layer-right","30%");
|
||||
|
||||
})
|
||||
|
||||
$(".drawer-left").click(function(){
|
||||
|
||||
pearOper.drawer("left",".layer-right","30%");
|
||||
|
||||
})
|
||||
|
||||
$(".drawer-top").click(function(){
|
||||
|
||||
pearOper.drawer("top",".layer-right","30%");
|
||||
|
||||
})
|
||||
|
||||
$(".drawer-bottom").click(function(){
|
||||
|
||||
pearOper.drawer("bottom",".layer-right","30%");
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<script src="../../../component/layui/layui.js"></script>
|
||||
<script>
|
||||
layui.use(['element', 'jquery', 'drawer', 'layer', 'code'], function() {
|
||||
var element = layui.element;
|
||||
var $ = layui.jquery;
|
||||
var drawer = layui.drawer;
|
||||
var layer = layui.layer;
|
||||
|
||||
layui.code();
|
||||
|
||||
$(".drawer-right").click(function() {
|
||||
drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-right",
|
||||
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-top",
|
||||
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();
|
||||
})
|
||||
|
||||
$(".drawer-auto-close").click(function() {
|
||||
dom = drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-auto-close",
|
||||
distance: "30%",
|
||||
maskClose: false,
|
||||
time: 1000
|
||||
});
|
||||
})
|
||||
|
||||
$(".drawer-call-back").click(function() {
|
||||
dom = drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-right",
|
||||
distance: "30%",
|
||||
success: function() {
|
||||
layer.msg("触发回调函数", {
|
||||
icon: 1,
|
||||
time: 1000
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue