构建 数据菜单 文档
parent
72120752af
commit
19ca7d82b7
|
|
@ -2,33 +2,28 @@
|
|||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.result .success svg {
|
||||
color: #32C682;
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
|
||||
}
|
||||
|
||||
.result .error svg {
|
||||
color: #f56c6c;
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
|
||||
}
|
||||
|
||||
.result .title {
|
||||
margin-top: 25px;
|
||||
|
||||
}
|
||||
|
||||
.result .desc {
|
||||
margin-top: 25px;
|
||||
width: 60%;
|
||||
margin-left: 20%;
|
||||
color: rgba(0, 0, 0, .45);
|
||||
}
|
||||
|
||||
.result .content {
|
||||
margin-top: 20px;
|
||||
width: 80%;
|
||||
|
|
@ -37,10 +32,8 @@
|
|||
height: 200px;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.result .action {
|
||||
padding-top: 10px;
|
||||
border-top: 1px whitesmoke solid;
|
||||
margin-top: 25px;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -175,6 +175,13 @@
|
|||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/tab.html"
|
||||
},{
|
||||
"id": 60132,
|
||||
"title": "数据菜单",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/menu.html"
|
||||
}]
|
||||
}, {
|
||||
"id": 204,
|
||||
|
|
|
|||
|
|
@ -44,51 +44,14 @@
|
|||
background-color: #f56c6c !important
|
||||
}
|
||||
.pear-btn-warming {
|
||||
background-color: #e6a23c !important
|
||||
background-color: #f6ad55 !important
|
||||
}
|
||||
.pear-btn-success {
|
||||
background-color: #67c23a !important
|
||||
background-color: #5FB878 !important
|
||||
}
|
||||
.pear-btn[round] {
|
||||
border-radius: 50px;
|
||||
}
|
||||
.pear-btn-primary[plain] {
|
||||
color: #409eff !important;
|
||||
background: #ecf5ff !important;
|
||||
border-color: #b3d8ff !important;
|
||||
}
|
||||
.pear-btn-primary[plain]:hover {
|
||||
color: #fff !important;
|
||||
background-color: #2d8cf0 !important
|
||||
}
|
||||
.pear-btn-success[plain] {
|
||||
color: #67c23a !important;
|
||||
background: #f0f9eb !important;
|
||||
border-color: #c2e7b0 !important;
|
||||
}
|
||||
.pear-btn-success[plain]:hover {
|
||||
color: white !important;
|
||||
background-color: #67c23a !important
|
||||
}
|
||||
.pear-btn-warming[plain] {
|
||||
color: #e6a23c !important;
|
||||
background: #fdf6ec !important;
|
||||
border-color: #f5dab1 !important;
|
||||
}
|
||||
.pear-btn-warming[plain]:hover {
|
||||
color: white !important;
|
||||
background-color: #e6a23c !important
|
||||
}
|
||||
.pear-btn-danger[plain] {
|
||||
color: #f56c6c !important;
|
||||
background: #fef0f0 !important;
|
||||
border-color: #fbc4c4 !important;
|
||||
}
|
||||
.pear-btn-danger[plain]:hover {
|
||||
color: white !important;
|
||||
background-color: #f56c6c !important
|
||||
}
|
||||
|
||||
/** Button Group */
|
||||
.pear-btn-group {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -12,19 +12,6 @@ textarea::-webkit-input-placeholder {
|
|||
.layui-input:focus,
|
||||
.layui-textarea:focus {
|
||||
border-color: #5FB878!important;
|
||||
box-shadow: 0 0 0 3px rgba(95, 184, 120, 0.2)!important;
|
||||
}
|
||||
|
||||
.layui-input[success],
|
||||
.layui-textarea[success] {
|
||||
border-color: #5FB878!important;
|
||||
box-shadow: 0 0 0 3px rgba(95, 184, 120, 0.2)!important;
|
||||
}
|
||||
|
||||
.layui-input[failure],
|
||||
.layui-textarea[failure] {
|
||||
border-color: #f56c6c !important;
|
||||
box-shadow: 0 0 0 3px rgba(245,108,108, 0.2)!important;
|
||||
}
|
||||
|
||||
.layui-input,
|
||||
|
|
|
|||
|
|
@ -439,27 +439,27 @@ div[xm-select-skin=default].xm-form-selected .xm-select:hover {
|
|||
}
|
||||
|
||||
div[xm-select-skin=primary] .xm-select-title div.xm-select-label>span {
|
||||
background-color: #67c23a!important
|
||||
background-color: #5FB878!important
|
||||
color: #FFF;
|
||||
border: 1px solid #67c23a!important
|
||||
border: 1px solid #5FB878!important
|
||||
}
|
||||
|
||||
div[xm-select-skin=primary] .xm-select-title div.xm-select-label>span i {
|
||||
background-color: #67c23a!important
|
||||
background-color: #5FB878!important
|
||||
color: #FFF
|
||||
}
|
||||
|
||||
div[xm-select-skin=primary] dl dd:not(.xm-dis-disabled) i {
|
||||
border-color: #67c23a!important
|
||||
border-color: #5FB878!important
|
||||
}
|
||||
|
||||
div[xm-select-skin=primary] dl dd.xm-select-this:not(.xm-dis-disabled) i {
|
||||
color: #67c23a!important
|
||||
color: #5FB878!important
|
||||
}
|
||||
|
||||
div[xm-select-skin=primary].xm-form-selected .xm-select,
|
||||
div[xm-select-skin=primary].xm-form-selected .xm-select:hover {
|
||||
border-color: #67c23a!important
|
||||
border-color: #5FB878!important
|
||||
}
|
||||
|
||||
div[xm-select-skin=normal] .xm-select-title div.xm-select-label>span {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
.step-item-tail i {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
height: 3px;
|
||||
margin-top: 4px;
|
||||
vertical-align: top;
|
||||
background: #5FB878;
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
text-align: center;
|
||||
vertical-align: top;
|
||||
color: #5FB878;
|
||||
border: 2px solid #5FB878;
|
||||
border: 3px solid #5FB878;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
|
||||
.tag .layui-btn .tag-close:hover {
|
||||
border-radius: 2px;
|
||||
background-color: #FF5722;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -20,7 +19,7 @@
|
|||
-webkit-transition: all .2s;
|
||||
}
|
||||
.tag-item {
|
||||
background-color: #67c23a;
|
||||
background-color: #5FB878;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -31,13 +30,13 @@
|
|||
|
||||
}
|
||||
.tag-item-normal {
|
||||
background-color: #2D8CF0;
|
||||
background-color: #5FB878;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tag-item-warm {
|
||||
background-color: #e6a23c;
|
||||
background-color: #f6ad55;
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,13 +40,13 @@ layui.define(["jquery","layer"], function (exports) {
|
|||
if(this.autoHead){
|
||||
style += '.pear-admin .layui-header{background-color:' + color + '!important;}.pear-admin .layui-header .layui-nav .layui-nav-item>a{color:white!important;}';
|
||||
}
|
||||
style += '.pear-btn.pear-btn-primary {background-color:' + color + '!important}';
|
||||
style += '.layui-input:focus,.layui-textarea:focus {border-color: '+ color +'!important;box-shadow: 0 0 0 3px rgba(95, 184, 120, 0.2)!important;}'
|
||||
style += '.pear-btn-primary {background-color:' + color + '!important}';
|
||||
style += '.layui-input:focus,.layui-textarea:focus {border-color: '+ color +'!important;}'
|
||||
style += '.layui-form-checked[lay-skin=primary] i {border-color: '+ color +'!important;background-color: ' + color + ';}'
|
||||
style += '.layui-form-onswitch { border-color: ' + color + '; background-color: '+color+';}'
|
||||
style += '.layui-form-radio>i:hover, .layui-form-radioed>i {color: ' + color + ';}'
|
||||
style += '.layui-laypage .layui-laypage-curr .layui-laypage-em{background-color:'+ color +'!important}'
|
||||
style += '.layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{border-bottom: 2px solid '+color+'!important}'
|
||||
style += '.layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{border-bottom: 3px solid '+color+'!important}'
|
||||
style += '.layui-tab-brief>.layui-tab-title .layui-this{color:'+color+'!important}'
|
||||
style += '.layui-progress-bar{background-color:'+color+'}';
|
||||
style += '.layui-elem-quote{border-left: 5px solid '+ color +'}';
|
||||
|
|
@ -55,6 +55,12 @@ layui.define(["jquery","layer"], function (exports) {
|
|||
style += '.pear-text{color:' + color + '!important}';
|
||||
style += '.pear-collasped-pe{background-color:'+color+'!important}'
|
||||
style += '.layui-form-select dl dd.layui-this{background-color:'+color+'}'
|
||||
style += '.tag-item-normal{background:'+color+'!important}';
|
||||
style += '.step-item-head.step-item-head-active{background-color:'+color+'}'
|
||||
style += '.step-item-head{border: 3px solid '+color+';}'
|
||||
style += '.step-item-tail i{background-color:'+color+'}'
|
||||
style += '.step-item-head{color:' + color + '}'
|
||||
|
||||
var colorPane = $("#pear-admin-color");
|
||||
if(colorPane.length>0){
|
||||
colorPane.html(style);
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ window.rootPath = (function(src) {
|
|||
* */
|
||||
layui.config({
|
||||
base: rootPath + "modules/",
|
||||
version: "3.4.2.Release"
|
||||
version: "3.4.3.Release"
|
||||
}).extend({
|
||||
admin: "admin", // 框架布局组件
|
||||
menu: "menu", // 数据菜单组件
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ window.rootPath = (function(src) {
|
|||
* */
|
||||
layui.config({
|
||||
base: rootPath + "modules/",
|
||||
version: "3.4.2.Release"
|
||||
version: "3.4.3.Release"
|
||||
}).extend({
|
||||
admin: "admin", // 框架布局组件
|
||||
menu: "menu", // 数据菜单组件
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@
|
|||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../admin/images/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
|
||||
<p>七彩枫叶 在 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
|
||||
<span>几秒前</span>
|
||||
</div>
|
||||
</dd>
|
||||
|
|
@ -172,7 +172,7 @@
|
|||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../admin/images/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<p>简 在 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a class="pear-text" lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<span>2天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../admin/images/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
|
||||
<p>恒宇少年 将 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
|
||||
<span>7天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
|
|
@ -188,7 +188,7 @@
|
|||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../admin/images/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
|
||||
<p>如花 在 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a class="pear-text" lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
|
||||
<span>7天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
|
|
@ -196,7 +196,7 @@
|
|||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../admin/images/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
|
||||
<p>就眠仪式 在 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a class="pear-text" lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
|
||||
<span>8天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
|
|
@ -204,7 +204,7 @@
|
|||
<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
|
||||
src="../../admin/images/avatar.jpg"></a></div>
|
||||
<div>
|
||||
<p>贤心 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<p>贤心 在 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a class="pear-text" lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
|
||||
<span>8天前</span>
|
||||
</div>
|
||||
</dd>
|
||||
|
|
@ -233,11 +233,11 @@
|
|||
链接
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<a target="_blank" href="http://www.pearadmin.com" class="pear-btn pear-btn-success layui-btn-fluid" style="height: 50px;line-height: 50px;">官 网</a>
|
||||
<br/>
|
||||
<a target="_blank" href="http://www.pearadmin.com/doc/" class="pear-btn pear-btn-primary layui-btn-fluid" style="margin-top: 8px;height: 50px;line-height: 50px;">文 档</a>
|
||||
<a target="_blank" href="http://www.pearadmin.com" class="pear-btn pear-btn-primary layui-btn-fluid" style="margin-top: 8px;height: 50px;line-height: 50px;">官 网</a>
|
||||
<br/>
|
||||
<a target="_blank" href="https://gitee.com/pear-admin/Pear-Admin-Layui" class="pear-btn pear-btn-warming layui-btn-fluid" style="margin-top: 8px;height: 50px;line-height: 50px;">下 载</a>
|
||||
<br/>
|
||||
<a target="_blank" href="https://gitee.com/pear-admin/Pear-Admin-Layui" class="pear-btn pear-btn-danger layui-btn-fluid" style="margin-top: 8px;height: 50px;line-height: 50px;">后 端</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -138,37 +138,6 @@
|
|||
</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="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>
|
||||
<br>
|
||||
<br>
|
||||
<button class="pear-btn pear-btn-primary" round plain> Button-One</button>
|
||||
<button class="pear-btn pear-btn-success" round plain> Button-Two</button>
|
||||
<button class="pear-btn pear-btn-danger" round plain> Button-Three</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">
|
||||
<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 class="layui-col-md12">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css"/>
|
||||
</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">
|
||||
Menu 数据菜单对侧边菜单的便捷封装
|
||||
</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">
|
||||
<link rel="stylesheet" href="component/pear/css/pear.css" />
|
||||
并
|
||||
<script src="component/layui/layui.js"></script>
|
||||
并
|
||||
<script src="component/pear/pear.js"></script>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">实例</div>
|
||||
<div class="layui-card-body">
|
||||
<div id="sideMenu"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">显示代码</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<pre class="layui-code" lay-encode="true">
|
||||
|
||||
var sideMenu = menu.render({
|
||||
elem: 'sideMenu',
|
||||
async: true,
|
||||
theme: "dark-theme",
|
||||
height: '300px',
|
||||
control: false,
|
||||
defaultMenu: 0,
|
||||
accordion: true,
|
||||
url: "../../admin/data/menu.json",
|
||||
parseData: false,
|
||||
done: function() {
|
||||
layer.msg("加载完成")
|
||||
}
|
||||
});
|
||||
|
||||
sideMenu.click(function(dom, data) {
|
||||
layer.msg("菜单点击 : " + JSON.stringify(data));
|
||||
})
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['layer', 'form',
|
||||
'element', 'menu', 'code','jquery'
|
||||
], function() {
|
||||
var layer = layui.layer,
|
||||
menu = layui.menu,
|
||||
$ = layui.jquery,
|
||||
form = layui.form;
|
||||
|
||||
layui.code();
|
||||
|
||||
var sideMenu = menu.render({
|
||||
elem: 'sideMenu',
|
||||
async: true,
|
||||
theme: "dark-theme",
|
||||
height: '300px',
|
||||
control: false,
|
||||
defaultMenu: 0,
|
||||
accordion: true,
|
||||
url: "../../admin/data/menu.json",
|
||||
parseData: false,
|
||||
done: function() {
|
||||
layer.msg("加载完成")
|
||||
}
|
||||
});
|
||||
|
||||
sideMenu.click(function(dom, data) {
|
||||
layer.msg("菜单点击 : " + JSON.stringify(data));
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue