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

Drawer.js 自动关闭 / success 回调函数

develop
就眠仪式 2020-07-17 17:02:35 +08:00
parent c125d71c07
commit e02e5393b3
4 changed files with 47 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
admin/data/document.json Normal file
View File

0
component/pear/module/common.js Normal file
View File

5
component/pear/module/drawer.js
View File

@ -13,8 +13,9 @@ layui.define(['jquery', 'element'], function(exports) {
dom: option.dom, dom: option.dom,
direction: option.direction, direction: option.direction,
distance: option.distance, distance: option.distance,
time:option.time, time:option.time?option.time:0,
maskClose:option.maskClose maskClose:option.maskClose,
callback:option.success
}); });
_right.open(); _right.open();

48
view/document/drawer.html
View File

@ -22,7 +22,7 @@
</div> </div>
<div class="layui-card"> <div class="layui-card">
<div class="layui-card-header">更多</div> <div class="layui-card-header">进阶</div>
<div class="layui-card-body"> <div class="layui-card-body">
<button class="drawer-open-mask pear-btn pear-btn-primary">开启遮盖层</button> <button class="drawer-open-mask pear-btn pear-btn-primary">开启遮盖层</button>
<button class="drawer-close-mask pear-btn pear-btn-primary">关闭遮盖层</button> <button class="drawer-close-mask pear-btn pear-btn-primary">关闭遮盖层</button>
@ -30,37 +30,56 @@
</div> </div>
<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>
<button class="drawer-call-back pear-btn pear-btn-success">回调函数</button>
</div>
</div>
<div class="wrap"> <div class="wrap">
<div class="layer-left"> <div class="layer-left">
<br/>
<h3>左侧弹层内容...</h3> <h3>左侧弹层内容...</h3>
</div> </div>
<div class="layer-right"> <div class="layer-right">
<br/>
<h3>右侧弹层内容...</h3> <h3>右侧弹层内容...</h3>
</div> </div>
<div class="layer-top"> <div class="layer-top">
<br/>
<h3>上侧弹层内容...</h3> <h3>上侧弹层内容...</h3>
</div> </div>
<div class="layer-bottom"> <div class="layer-bottom">
<br/>
<h3>下侧弹层内容...</h3> <h3>下侧弹层内容...</h3>
</div> </div>
<div class="layer-open-mask"> <div class="layer-open-mask">
<h3>点击右侧灰色区域 <br/>
</h3> <h3>点击右侧灰色区域</h3>
</div> </div>
<div class="layer-close-mask"> <div class="layer-close-mask">
<button id="btnClose" class="pear-btn pear-btn-primary" style="position: absolute; bottom: 10px;left: 10px;">关闭抽屉</button> <button id="btnClose" class="pear-btn pear-btn-primary" style="position: absolute; bottom: 10px;left: 10px;">关闭抽屉</button>
</div> </div>
<div class="layer-auto-close">
<br/>
<h3>打开 2秒 后自动关闭...</h3>
</div>
</div> </div>
</body> </body>
<script src="../../component/layui/layui.js"></script> <script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script> <script src="../../component/pear/pear.js"></script>
<script> <script>
layui.use(['element', 'jquery', 'drawer', 'code'], function() { layui.use(['element', 'jquery', 'drawer', 'layer'], function() {
var element = layui.element; var element = layui.element;
var $ = layui.jquery; var $ = layui.jquery;
var drawer = layui.drawer; var drawer = layui.drawer;
var layer = layui.layer;
$(".drawer-right").click(function() { $(".drawer-right").click(function() {
drawer.open({ drawer.open({
@ -120,6 +139,27 @@
dom.close(); 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> </script>
</html> </html>