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

扩展表单样式

develop
就眠仪式 2020-08-01 20:31:51 +08:00
parent a5b505fc70
commit 30af02bf24
4 changed files with 54 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
component/pear/css/pear-module/form.css
View File

@ -16,3 +16,18 @@
top: 5px;
left: 15px;
}
.layui-input[hover]:focus {
box-shadow: 0px 0px 3px 1px #5FB878 !important;
border: #5FB878 1px solid;
}
.layui-input[success] {
box-shadow: 0px 0px 3px 1px #5FB878 !important;
border: #5FB878 1px solid;
}
.layui-input[failure] {
box-shadow: 0px 0px 3px 1px #F56C6C;
border: #F56C6C 1px solid;
}

12
component/pear/module/admin.js
View File

@ -14,6 +14,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
var bodyTab;
var pearAdmin = new function() {
this.render = function(option) {
var option = getData();
this.menuRender(option);
@ -22,10 +23,12 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
this.logoRender(option);
this.themeRender(option);
}
this.logoRender = function(option) {
$(".layui-logo .logo").attr("src", option.logo.image);
$(".layui-logo .title").html(option.logo.title);
}
this.menuRender = function(option) {
sideMenu = pearMenu.render({
elem: 'sideMenu', //依赖容器
@ -41,6 +44,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
})
sideMenu.selectItem(option.menu.select);
}
this.bodyRender = function(option) {
if (option.tab.muiltTab) {
bodyTab = pearTab.render({
@ -126,12 +130,14 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
})
}
}
this.keepLoad = function(option) {
compatible()
setTimeout(function() {
$(".loader-main").fadeOut(option.done);
}, option.other.keepLoad)
}
this.themeRender = function(option) {
if (option.theme.allowCustom == false) {
@ -153,11 +159,13 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
this.colorSet(color.color);
this.menuSkin(menu);
}
this.menuSkin = function(theme) {
$(".pear-admin").removeClass("light-theme");
$(".pear-admin").removeClass("dark-theme");
$(".pear-admin").addClass(theme);
}
this.colorSet = function(color) {
var style = '';
@ -328,6 +336,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
'<ul>\n' + bgColorHtml + '</ul>\n' +
'</div>\n' +
'</div>';
layer.open({
type: 1,
offset: 'r',
@ -377,6 +386,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
$.ajaxSettings.async = true;
return data;
}
$('body').on('click', '[data-select-bgcolor]', function() {
var theme = $(this).attr('data-select-bgcolor');
$('[data-select-bgcolor]').removeClass("layui-this");
@ -384,6 +394,7 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
localStorage.setItem("theme-menu", theme);
pearAdmin.menuSkin(theme);
});
$('body').on('click', '.select-color-item', function() {
$(".select-color-item").removeClass("layui-icon").removeClass("layui-icon-ok");
$(this).addClass("layui-icon").addClass("layui-icon-ok");
@ -434,3 +445,4 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
}
exports('admin', pearAdmin);
})

4
component/pear/module/menu.js
View File

@ -27,9 +27,7 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
change: opt.change ? opt.change : function() {
console.log("切换")
},
done: opt.done ? opt.done : function() {
console.log("菜单渲染成功");
}
done: opt.done ? opt.done : function() {}
}
// 根 据 请 求 方 式 获 取 数 据

44
view/document/form.html
View File

@ -39,13 +39,6 @@
<div class="layui-col-md6">
<input type="password" name="title" hover placeholder="密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-col-md6">
<input type="text" name="title" success placeholder="成功" autocomplete="off" class="layui-input">
</div>
<div class="layui-col-md6">
<input type="text" name="title" failure placeholder="失败" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
@ -113,8 +106,34 @@
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">复选框</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
<input type="checkbox" name="" lay-skin="primary">
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card" style="margin-top: 10px;">
<div class="layui-card-header">扩展样式</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="text" name="title" hover placeholder="密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-col-md12">
<input type="text" name="title" success placeholder="成功" autocomplete="off" class="layui-input">
</div>
<div class="layui-col-md12">
<input type="text" name="title" failure placeholder="失败" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">文本域</div>
<div class="layui-card-body layui-row layui-col-space10">
@ -144,17 +163,6 @@
</div>
</div>
</div>
<div class="layui-card layui-form" lay-filter="component-form-element">
<div class="layui-card-header">复选框</div>
<div class="layui-card-body layui-row layui-col-space10">
<div class="layui-col-md12">
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
<input type="checkbox" name="" lay-skin="primary">
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>