Button Document
就眠仪式
parent
0b2b4472bc
commit
2f79ecb2b3
|
|
@ -0,0 +1,9 @@
|
|||
.layui-colla-content{
|
||||
padding: 0px;
|
||||
}
|
||||
.layui-code-view{
|
||||
margin: 0px!important;
|
||||
}
|
||||
.layui-code-h3{
|
||||
display: none!important;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
.pear-link{
|
||||
font-size: 15px!important;
|
||||
}
|
||||
|
||||
.pear-link.pear-link-primary{
|
||||
color : #5FB878 ;
|
||||
}
|
||||
|
||||
.pear-link.pear-link-success{
|
||||
color : #5FB878 ;
|
||||
}
|
||||
|
||||
.pear-link .pear-link-warming{
|
||||
|
||||
|
||||
}
|
||||
|
||||
.pear-link .pear-link-danger{
|
||||
|
||||
}
|
||||
|
|
@ -6,5 +6,8 @@
|
|||
@import url("pear-module/frame.css");
|
||||
@import url("pear-module/menu.css");
|
||||
@import url("pear-module/form.css");
|
||||
@import url("pear-module/link.css");
|
||||
@import url("pear-module/form.css");
|
||||
@import url("pear-module/tab.css");
|
||||
@import url("pear-module/code.css");
|
||||
@import url("pear-module/link.css");
|
||||
|
|
|
|||
|
|
@ -7,6 +7,28 @@
|
|||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
开发环境
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
Pear Button 参考 Element UI 样式 ，提供 Button 服务
|
||||
</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">
|
||||
<link rel="stylesheet" href="component/pear/css/pear.css" />
|
||||
或
|
||||
<link rel="stylesheet" href="component/pear/css/pear-module/button.css" />
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
|
|
@ -24,6 +46,22 @@
|
|||
</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">
|
||||
<button class="pear-btn"> Default Button </button>
|
||||
<button class="pear-btn" dashed> Dashed Button </button>
|
||||
<button class="pear-btn pear-btn-primary"> Primary Button </button>
|
||||
<button class="pear-btn pear-btn-primary"> Button-Primary </button>
|
||||
<button class="pear-btn pear-btn-success"> Button-Success </button>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
|
|
@ -43,7 +81,23 @@
|
|||
</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">
|
||||
<button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg </button>
|
||||
<button class="pear-btn pear-btn-primary"> Button-Default </button>
|
||||
<button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm </button>
|
||||
<button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs </button>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
|
|
@ -59,9 +113,25 @@
|
|||
<br>
|
||||
<br>
|
||||
<div class="pear-btn-group">
|
||||
<button class="pear-btn"> Button-One</button>
|
||||
<button class="pear-btn"> Button-Two</button>
|
||||
<button class="pear-btn"> Button-Three</button>
|
||||
<button class="pear-btn"> Button-One </button>
|
||||
<button class="pear-btn"> Button-Two </button>
|
||||
<button class="pear-btn"> Button-Three </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">
|
||||
<div class="pear-btn-group">
|
||||
<button class="pear-btn"> Button-One </button>
|
||||
<button class="pear-btn"> Button-Two </button>
|
||||
<button class="pear-btn"> Button-Three </button>
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -83,6 +153,28 @@
|
|||
</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">
|
||||
<button class="pear-btn pear-btn-primary" plain> Button-One </button>
|
||||
<button class="pear-btn pear-btn-success" plain> Button-Two </button>
|
||||
<button class="pear-btn pear-btn-danger" plain> Button-Three </button>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['element', 'code'], function() {
|
||||
var element = layui.element;
|
||||
layui.code();
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -20,49 +20,24 @@
|
|||
<button class="drawer-right pear-btn pear-btn-danger">右</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">进阶</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="drawer-open-mask pear-btn pear-btn-primary">开启遮盖层</button>
|
||||
<button class="drawer-close-mask pear-btn pear-btn-primary">关闭遮盖层</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<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>
|
||||
<button class="drawer-call-back pear-btn pear-btn-success">回调函数</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<div class="layer-left">
|
||||
<br/>
|
||||
<h3>左侧弹层内容...</h3>
|
||||
</div>
|
||||
<div class="layer-right">
|
||||
<br/>
|
||||
<h3>右侧弹层内容...</h3>
|
||||
</div>
|
||||
<div class="layer-top">
|
||||
<br/>
|
||||
<h3>上侧弹层内容...</h3>
|
||||
</div>
|
||||
<div class="layer-bottom">
|
||||
<br/>
|
||||
<h3>下侧弹层内容...</h3>
|
||||
<div class="layer-call-back">
|
||||
<br />
|
||||
<h3>关闭后产生回调函数...</h3>
|
||||
</div>
|
||||
|
||||
<div class="layer-open-mask">
|
||||
<br/>
|
||||
<h3>点击右侧灰色区域</h3>
|
||||
<br />
|
||||
<h3> 开启遮盖层关闭 ,点击右侧灰色区域</h3>
|
||||
</div>
|
||||
<div class="layer-close-mask">
|
||||
<br />
|
||||
<h3> 关闭遮盖层，通过 JS API 关闭抽屉</h3>
|
||||
<button id="btnClose" class="pear-btn pear-btn-primary" style="position: absolute; bottom: 10px;left: 10px;">关闭抽屉</button>
|
||||
</div>
|
||||
<div class="layer-auto-close">
|
||||
<br/>
|
||||
<h3>打开 2秒 后自动关闭...</h3>
|
||||
<br />
|
||||
<h3>打开 2 秒 后自动关闭...</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -77,40 +52,6 @@
|
|||
var layer = layui.layer;
|
||||
|
||||
$(".drawer-right").click(function() {
|
||||
drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-top",
|
||||
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-right",
|
||||
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",
|
||||
|
|
@ -119,42 +60,47 @@
|
|||
});
|
||||
})
|
||||
|
||||
var dom;
|
||||
$(".drawer-left").click(function() {
|
||||
|
||||
$(".drawer-close-mask").click(function() {
|
||||
dom = drawer.open({
|
||||
direction: "right",
|
||||
direction: "left",
|
||||
dom: ".layer-close-mask",
|
||||
distance: "30%",
|
||||
maskClose: false
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
$("#btnClose").click(function() {
|
||||
dom.close();
|
||||
})
|
||||
|
||||
$(".drawer-auto-close").click(function() {
|
||||
$(".drawer-top").click(function() {
|
||||
dom = drawer.open({
|
||||
direction: "right",
|
||||
direction: "top",
|
||||
dom: ".layer-auto-close",
|
||||
distance: "30%",
|
||||
maskClose: false,
|
||||
time: 1000
|
||||
});
|
||||
})
|
||||
|
||||
$(".drawer-call-back").click(function(){
|
||||
|
||||
$(".drawer-bottom").click(function() {
|
||||
dom = drawer.open({
|
||||
direction: "right",
|
||||
dom: ".layer-right",
|
||||
direction: "bottom",
|
||||
dom: ".layer-call-back",
|
||||
distance: "30%",
|
||||
success:function(){
|
||||
layer.msg("触发回调函数",{icon:1,time:1000});
|
||||
success: function() {
|
||||
layer.msg("触发回调函数", {
|
||||
icon: 1,
|
||||
time: 1000
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
var dom;
|
||||
|
||||
$("#btnClose").click(function() {
|
||||
dom.close();
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue