first commit
This commit is contained in:
root
597
public/demos/document/drawer.html
Executable file
597
public/demos/document/drawer.html
Executable file
@ -0,0 +1,597 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user