2020-07-17 00:29:38 +00:00
|
|
|
<!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="wrap">
|
2020-07-18 08:29:03 +00:00
|
|
|
<div class="layer-call-back">
|
|
|
|
|
<br />
|
|
|
|
|
<h3>关闭后产生回调函数...</h3>
|
2020-07-17 00:29:38 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="layer-open-mask">
|
2020-07-18 08:29:03 +00:00
|
|
|
<br />
|
|
|
|
|
<h3> 开启遮盖层关闭 ,点击右侧灰色区域</h3>
|
2020-07-17 00:29:38 +00:00
|
|
|
</div>
|
|
|
|
|
<div class="layer-close-mask">
|
2020-07-18 08:29:03 +00:00
|
|
|
<br />
|
|
|
|
|
<h3> 关闭遮盖层，通过 JS API 关闭抽屉</h3>
|
2020-07-17 00:29:38 +00:00
|
|
|
<button id="btnClose" class="pear-btn pear-btn-primary" style="position: absolute; bottom: 10px;left: 10px;">关闭抽屉</button>
|
|
|
|
|
</div>
|
2020-07-17 09:02:35 +00:00
|
|
|
<div class="layer-auto-close">
|
2020-07-18 08:29:03 +00:00
|
|
|
<br />
|
|
|
|
|
<h3>打开 2 秒 后自动关闭...</h3>
|
2020-07-17 09:02:35 +00:00
|
|
|
</div>
|
2020-07-17 00:29:38 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
<script src="../../component/layui/layui.js"></script>
|
|
|
|
|
<script src="../../component/pear/pear.js"></script>
|
|
|
|
|
<script>
|
2020-07-17 09:02:35 +00:00
|
|
|
layui.use(['element', 'jquery', 'drawer', 'layer'], function() {
|
2020-07-17 00:29:38 +00:00
|
|
|
var element = layui.element;
|
|
|
|
|
var $ = layui.jquery;
|
|
|
|
|
var drawer = layui.drawer;
|
2020-07-17 09:02:35 +00:00
|
|
|
var layer = layui.layer;
|
2020-07-17 00:29:38 +00:00
|
|
|
|
|
|
|
|
$(".drawer-right").click(function() {
|
|
|
|
|
drawer.open({
|
|
|
|
|
direction: "right",
|
|
|
|
|
dom: ".layer-open-mask",
|
|
|
|
|
distance: "30%",
|
|
|
|
|
maskClose: true
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
|
2020-07-18 08:29:03 +00:00
|
|
|
$(".drawer-left").click(function() {
|
2020-07-17 00:29:38 +00:00
|
|
|
|
|
|
|
|
dom = drawer.open({
|
2020-07-18 08:29:03 +00:00
|
|
|
direction: "left",
|
2020-07-17 00:29:38 +00:00
|
|
|
dom: ".layer-close-mask",
|
|
|
|
|
distance: "30%",
|
|
|
|
|
maskClose: false
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
2020-07-18 08:29:03 +00:00
|
|
|
$(".drawer-top").click(function() {
|
2020-07-17 09:02:35 +00:00
|
|
|
dom = drawer.open({
|
2020-07-18 08:29:03 +00:00
|
|
|
direction: "top",
|
2020-07-17 09:02:35 +00:00
|
|
|
dom: ".layer-auto-close",
|
|
|
|
|
distance: "30%",
|
|
|
|
|
maskClose: false,
|
|
|
|
|
time: 1000
|
|
|
|
|
});
|
|
|
|
|
})
|
2020-07-18 08:29:03 +00:00
|
|
|
|
|
|
|
|
$(".drawer-bottom").click(function() {
|
2020-07-17 09:02:35 +00:00
|
|
|
dom = drawer.open({
|
2020-07-18 08:29:03 +00:00
|
|
|
direction: "bottom",
|
|
|
|
|
dom: ".layer-call-back",
|
2020-07-17 09:02:35 +00:00
|
|
|
distance: "30%",
|
2020-07-18 08:29:03 +00:00
|
|
|
success: function() {
|
|
|
|
|
layer.msg("触发回调函数", {
|
|
|
|
|
icon: 1,
|
|
|
|
|
time: 1000
|
|
|
|
|
});
|
2020-07-17 09:02:35 +00:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
})
|
2020-07-18 08:29:03 +00:00
|
|
|
|
|
|
|
|
var dom;
|
|
|
|
|
|
|
|
|
|
$("#btnClose").click(function() {
|
|
|
|
|
dom.close();
|
|
|
|
|
})
|
|
|
|
|
|
2020-07-17 00:29:38 +00:00
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
