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 Document

develop
就眠仪式 2020-07-18 18:09:47 +08:00
parent 2f79ecb2b3
commit 5fbd88135b
4 changed files with 77 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
component/pear/css/pear-module/table.css Normal file
View File

1
component/pear/css/pear.css
View File

@ -11,3 +11,4 @@
@import url("pear-module/tab.css");
@import url("pear-module/code.css");
@import url("pear-module/link.css");
@import url("pear-module/table.css");

1
index.html
View File

@ -77,6 +77,7 @@
logoTitle: "Pear Admin", // 网站标题
logoImage: "admin/images/logo.png" // 网站Logo
};
admin.render(config);
})
</script>

84
view/document/drawer.html
View File

@ -11,14 +11,78 @@
</style>
</head>
<body class="pear-container">
<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 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(['element', 'jquery', 'drawer', 'layer','code'], function() {
var drawer = layui.drawer;
drawer.open({
direction: "right",
dom: ".layer-open-mask",
distance: "30%",
maskClose: true
});
})
</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">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>属性</legend>
</fieldset>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>方法</legend>
</fieldset>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="layer-call-back">
@ -45,12 +109,14 @@
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['element', 'jquery', 'drawer', 'layer'], function() {
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();
$(".drawer-right").click(function() {
drawer.open({
direction: "right",
@ -94,7 +160,7 @@
}
});
})
var dom;
$("#btnClose").click(function() {