598 lines
16 KiB
HTML
598 lines
16 KiB
HTML
<!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-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>
|
|
<button id="layerDrawerIframe" class="pear-btn pear-btn-success">iframe远程页面</button>
|
|
<button id="layerDrawerURL" class="pear-btn pear-btn-success">URL远程页面</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>
|
|
<blockquote class="layui-elem-quote layui-quote-nm">
|
|
使用 url 参数指定抽屉代码片段地址，会使用 ajax 请求将代码片段拼接到抽屉中，和原来的页面在同一个页面上, 传值更方便。注意片段和原页面不能出现相同的 ID。
|
|
</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%",
|
|
});
|
|
})
|
|
|
|
$("#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"
|
|
})
|
|
})
|
|
</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="../../component/layui/layui.js"></script>
|
|
<script src="../../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();
|
|
|
|
$("#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"
|
|
})
|
|
})
|
|
|
|
$("#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>
|