545 lines
15 KiB
HTML
545 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>抽屉组件</title>
|
||
<link href="/static/component/pear/css/pear.css" rel="stylesheet" />
|
||
<style>
|
||
.wrap {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="pear-container">
|
||
<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>
|
||
</div>
|
||
|
||
<div class="layui-col-md12">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">扩展</div>
|
||
<div class="layui-card-body">
|
||
<div id="targetEl"
|
||
style="width: 600px;
|
||
height: 300px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
border: 1px solid gainsboro;
|
||
background-color: #EEE;
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center"">
|
||
<button id="targetDemo" class="pear-btn pear-btn-success">指定容器内打开</button>
|
||
</div>
|
||
</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;
|
||
$("#targetDemo").click(function () {
|
||
drawer.open({
|
||
// 指定挂载节点
|
||
target: "#targetEl"
|
||
direction: "right",
|
||
dom: ".layer-right",
|
||
distance: "50%",
|
||
});
|
||
})
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 新版 API -->
|
||
<div class="layui-col-md12">
|
||
<div class="layui-card">
|
||
<div class="layui-card-header">基于 layer 的抽屉扩展</div>
|
||
<div class="layui-card-body">
|
||
<p style="margin-bottom: 10px;">兼容原版 drawer 所有参数,要使用 layer 扩展,设置 legacy 选项为 false 即可</p>
|
||
<button id="layerDrawerLeft" class="pear-btn pear-btn-success">左</button>
|
||
<button id="layerDrawerRight" class="pear-btn pear-btn-success">右</button>
|
||
<button id="layerDrawerTop" class="pear-btn pear-btn-success">上</button>
|
||
<button id="layerDrawerBottom" class="pear-btn pear-btn-success">下</button>
|
||
<button id="layerDrawer" class="pear-btn pear-btn-success">更多参数示例</button>
|
||
<button id="layerDrawerParent" class="pear-btn pear-btn-success">父窗口打开</button>
|
||
<div
|
||
id="layertargetEl"
|
||
style="width: 600px;
|
||
height: 300px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
border: 1px solid gainsboro;
|
||
background-color: #EEE;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center">
|
||
<button id="layertargetDemo" class="pear-btn pear-btn-success">指定容器内打开</button>
|
||
</div>
|
||
<blockquote class="layui-elem-quote layui-quote-nm">指定容器内打开，需使用 layer 捕获层模式，并设置目标容器 style="overflow: hidden;
|
||
position: relative;"</blockquote>
|
||
</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">
|
||
$("#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%",
|
||
});
|
||
})
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layer-left" style="display: none;">
|
||
<br />
|
||
<h3>左侧弹层内容...</h3>
|
||
</div>
|
||
<div class="layer-right" style="display: none;">
|
||
<br />
|
||
<h3>右侧弹层内容...</h3>
|
||
</div>
|
||
<div class="layer-top" style="display: none;">
|
||
<br />
|
||
<h3>上侧弹层内容...</h3>
|
||
</div>
|
||
<div class="layer-bottom" style="display: none;">
|
||
<br />
|
||
<h3>下侧弹层内容...</h3>
|
||
</div>
|
||
|
||
<div class="layer-open-mask" style="display: none;">
|
||
<br />
|
||
<h3>点击右侧灰色区域</h3>
|
||
</div>
|
||
<div class="layer-close-mask" style="display: none;">
|
||
<button id="btnClose" class="pear-btn pear-btn-primary"
|
||
style="position: absolute; bottom: 10px;left: 10px;">关闭抽屉</button>
|
||
</div>
|
||
<div class="layer-auto-close" style="display: none;">
|
||
<br />
|
||
<h3>打开 2秒 后自动关闭...</h3>
|
||
</div>
|
||
|
||
</body>
|
||
|
||
<script src="/static/component/layui/layui.js"></script>
|
||
<script src="/static/component/pear/pear.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();
|
||
|
||
$("#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) {
|
||
parent.layui.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%",
|
||
});
|
||
})
|
||
|
||
$(".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
|
||
});
|
||
}
|
||
});
|
||
})
|
||
|
||
$("#targetDemo").click(function () {
|
||
drawer.open({
|
||
target: "#targetEl",
|
||
direction: "right",
|
||
dom: ".layer-right",
|
||
distance: "50%",
|
||
});
|
||
})
|
||
|
||
})
|
||
</script>
|
||
</html>
|