92 lines
2.2 KiB
HTML
92 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<link rel="stylesheet" href="../../../component/layui/css/layui.css" />
|
|
<link rel="stylesheet" href="../../../component/notiflix/notiflix-2.0.0.css"/>
|
|
<link rel="stylesheet" href="../../../admin/css/pearButton.css"/>
|
|
<link rel="stylesheet" href="../../../admin/css/pearOper.css"/>
|
|
<style>
|
|
.pear-container{
|
|
background-color: whitesmoke;
|
|
margin: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="pear-container">
|
|
|
|
|
|
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">抽屉</div>
|
|
<div class="layui-card-body">
|
|
<div>
|
|
<span>pearOper.drawer("top",".layer-top","30%")</span>
|
|
<br>
|
|
<br>
|
|
<span>pearOper.drawer("bottom",".layer-bottom","30%")</span>
|
|
<br>
|
|
<br>
|
|
<span>pearOper.drawer("left",".layer-left","30%")</span>
|
|
<br>
|
|
<br>
|
|
<span>pearOper.drawer("right",".layer-right","30%")</span>
|
|
<br>
|
|
<br>
|
|
</div>
|
|
<button class="drawer-top pear-btn pear-btn-primary" plain>上</button>
|
|
<button class="drawer-bottom pear-btn pear-btn-primary" plain>下</button>
|
|
<button class="drawer-left pear-btn pear-btn-primary" plain>左</button>
|
|
<button class="drawer-right pear-btn pear-btn-primary" plain>右</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="layer-right">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="../../../component/layui/layui.js"></script>
|
|
<script>
|
|
layui.use(['element','jquery','pearOper','code'],function(){
|
|
var element = layui.element;
|
|
var $ = layui.jquery;
|
|
var pearOper = layui.pearOper;
|
|
|
|
var msg = '"Do not try to become a person of success but try to become a person of value." <br><br>- Albert Einstein'
|
|
|
|
|
|
$(".drawer-right").click(function(){
|
|
|
|
pearOper.drawer("right",".layer-right","30%");
|
|
|
|
})
|
|
|
|
$(".drawer-left").click(function(){
|
|
|
|
pearOper.drawer("left",".layer-right","30%");
|
|
|
|
})
|
|
|
|
$(".drawer-top").click(function(){
|
|
|
|
pearOper.drawer("top",".layer-right","30%");
|
|
|
|
})
|
|
|
|
$(".drawer-bottom").click(function(){
|
|
|
|
pearOper.drawer("bottom",".layer-right","30%");
|
|
|
|
})
|
|
|
|
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |