<script src="component/layui/layui.js"></script> 并 <script src="component/pear/pear.js"></script>
layui.use(['drawer'], function() {
var drawer = layui.drawer;
drawer.open({
direction: "right",
dom: ".layer-top",
distance: "30%"
});
})
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();
})
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
});
})
})
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("触发回调函数");
}
});
})
})
layui.use(['drawer'], function() {
var drawer = layui.drawer;
$("#targetDemo").click(function () {
drawer.open({
// 指定挂载节点
target: "#targetEl"
direction: "right",
dom: ".layer-right",
distance: "50%",
});
})
兼容原版 drawer 所有参数,要使用 layer 扩展,设置 legacy 选项为 false 即可
指定容器内打开，需使用 layer 捕获层模式，并设置目标容器 style="overflow: hidden; position: relative;"
使用 url 参数指定抽屉代码片段地址，会使用 ajax 请求将代码片段拼接到抽屉中，和原来的页面在同一个页面上, 传值更方便。注意片段和原页面不能出现相同的 ID。
$("#layerDrawerLeft").click(function(){
drawer.open({
legacy: false,
offset: 'l',
area: "30%",
content: "left内容",
})
})
$("#layerDrawerRight").click(function () {
drawer.open({
legacy: false,
offset: 'r',
area: "30%",
content: "right内容",
})
})
$("#layerDrawerTop").click(function () {
drawer.open({
legacy: false,
offset: "t",
content: "top内容",
})
})
$("#layerDrawerBottom").click(function () {
drawer.open({
legacy: false,
offset: "b",
content: "bottom内容",
})
})
$("#layerDrawer").click(function () {
var index = drawer.open({
legacy: false,
title: ['标题', 'font-size:16px;color:#2d8cf0'],
maxmin: true,
offset: "r",
area: "30%",
content: "抽屉内容",
btn:"关闭",
yes:function(index,layero){
drawer.close(index);
console.log(index,layero);
},
btnAlign: "l",
closeBtn: 1,
})
})
$("#layerDrawerParent").click(function () {
var index = parent.layui.drawer.open({
legacy: false,
title: ['标题', 'font-size:16px;color:#2d8cf0'],
maxmin: true,
offset: "r",
area: "30%",
content: "抽屉内容",
btn:"关闭",
yes:function(index,layero){
drawer.close(index);
console.log(index,layero);
},
btnAlign: "l",
closeBtn: 1,
})
})
$("#layertargetDemo").click(function () {
drawer.open({
legacy: false,
target: "#layertargetEl",
direction: "right",
dom: ".layer-right",
distance: "50%",
});
})
$("#layerDrawerIframe").click(function () {
drawer.open({
legacy: false,
title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
offset: 'r',
area: "80%",
maxmin: true,
closeBtn: 1,
iframe: window.location.origin + "/view/document/table.html"
})
})
$("#layerDrawerURL").click(function () {
drawer.open({
legacy: false,
title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
offset: 'r',
area: "80%",
maxmin: true,
closeBtn: 1,
url: window.location.origin + "/view/document/drawerFragment.html"
})
})