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-09-03 23:32:07 +08:00
parent 90f8b0a306
commit f929f665eb
3 changed files with 201 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
component/code/css/style.css
View File

@ -2,8 +2,8 @@ html,body{background-color: whitesmoke}
.layui-fluid{margin-top: 15px;} .layui-fluid{margin-top: 15px;}
.content{min-height: 796px;} .content{min-height: 796px;}
.nav{text-align: center;} .nav{text-align: center;}
.nav button{margin-bottom: 3px;width: 100%;margin-top: 3px;margin-bottom: 3px;} .nav button{margin-bottom: 3px;width: 100%;margin-top: 3px;margin-bottom: 3px;border-radius: 1px;}
.nav button:hover{background-color: #5FB878;border: 1px solid #5FB878;color: white;}
.layui-card-body .layui-btn+.layui-btn{margin-left: 0px;} .layui-card-body .layui-btn+.layui-btn{margin-left: 0px;}
.code-show{min-height: 454px;} .code-show{min-height: 454px;}
.js-show{min-height: 200px;} .js-show{min-height: 200px;}
.del-form{line-height: initial;position: absolute;right: 15px;top: 50%;margin-top: -15px;}

41
component/code/index.html
View File

@ -15,27 +15,32 @@
<div class="layui-card nav click-but"> <div class="layui-card nav click-but">
<div class="layui-card-header">长</div> <div class="layui-card-header">长</div>
<div class="layui-card-body"> <div class="layui-card-body">
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="text">输入框</button> <button class="pear-btn pear-btn-sm" plain data-size="block" data-type="text">输入框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="password">密码框</button> <button class="pear-btn pear-btn-sm" plain data-size="block" data-type="password">密码框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="select">选择框</button> <button class="pear-btn pear-btn-sm" plain data-size="block" data-type="select">选择框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="checkbox_a">复选框</button> <button class="pear-btn pear-btn-sm" plain data-size="block" data-type="checkbox_a">复选框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="checkbox_b">开关</button> <button class="pear-btn pear-btn-sm" plain data-size="block" data-type="checkbox_b">开关</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="radio">单选框</button> <button class="pear-btn pear-btn-sm" plain data-size="block" data-type="radio">单选框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="textarea">文本域</button> <button class="pear-btn pear-btn-sm" plain data-size="block" data-type="textarea">文本域</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="submit">提交</button> <button class="pear-btn pear-btn-sm" plain data-size="block" data-type="submit">提交</button>
</div> </div>
</div> </div>
<div class="layui-card nav"> <div class="layui-card nav">
<div class="layui-card-header">短</div> <div class="layui-card-header">短</div>
<div class="layui-card-body"> <div class="layui-card-body">
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="inline" data-type="text">输入框</button> <button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="text">输入框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="inline" data-type="password">密码框</button> <button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="password">密码框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="inline" data-type="select">选择框</button> <button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="select">选择框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="inline" data-type="checkbox_a">复选框</button> <button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="checkbox_a">复选框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="inline" data-type="checkbox_b">开关</button> <button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="checkbox_b">开关</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="inline" data-type="radio">单选框</button> <button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="radio">单选框</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="inline" data-type="textarea">文本域</button> <button class="pear-btn pear-btn-sm" plain data-size="inline" data-type="textarea">文本域</button>
<button class="pear-btn pear-btn-sm pear-btn-primary" plain data-size="block" data-type="submit">提交</button> <button class="pear-btn" plain data-size="block" data-type="submit">提交</button>
</div>
</div>
<div class="layui-card nav">
<div class="layui-card-body">
<button class="pear-btn pear-btn-danger pear-btn-sm del-form" data-type="del"> <i class="layui-icon">&#xe640;</i></button>
</div> </div>
</div> </div>
@ -43,7 +48,7 @@
<div class="layui-col-md5"> <div class="layui-col-md5">
<div class="layui-card content"> <div class="layui-card content">
<div class="layui-card-header"> <div class="layui-card-header">
<button class="pear-btn pear-btn-danger pear-btn-sm del-form" data-type="del"> <i class="layui-icon">&#xe640;</i></button> view
</div> </div>
<div class="layui-card-body code"> <div class="layui-card-body code">
<form class="layui-form" action="" onsubmit="return false"> <form class="layui-form" action="" onsubmit="return false">
@ -59,7 +64,7 @@
</div> </div>
</div> </div>
<div class="layui-card r-code-js"> <div class="layui-card r-code-js">
<div class="layui-card-header">JS</div> <div class="layui-card-header">code</div>
<div class="layui-card-body"> <div class="layui-card-body">
<textarea name="" class="layui-textarea js-show"></textarea> <textarea name="" class="layui-textarea js-show"></textarea>
</div> </div>

344
component/pear/module/design.js
View File

@ -1,176 +1,182 @@
/** layui.define(['layer', 'form'], function(exports) {
* time: 2018年11月21日 15:25:32 var layer = layui.layer,
* author: dbag form = layui.form,
* blog: http://www.cnblogs.com/phper8/ $ = layui.$,
*/ key = '';
layui.define(['layer', 'form'], function(exports){ delHtml()
var layer = layui.layer,form = layui.form,$ = layui.$,key = ''; $('button').on('click', function() {
delHtml() var _this = $(this),
$('button').on('click',function(){ size = _this.data('size'),
var _this = $(this), type = _this.data('type'),
size = _this.data('size'), html = '';
type = _this.data('type'), key = randStrName();
html = ''; switch (type) {
key = randStrName(); case 'text':
switch (type) { html = input(type, size)
case 'text': break;
html = input(type,size) case 'password':
break; html = input(type, size)
case 'password': break;
html = input(type,size) case 'select':
break; html = select(size)
case 'select': break;
html = select(size) case 'checkbox_a':
break; html = checkbox_a(size)
case 'checkbox_a': break;
html = checkbox_a(size) case 'checkbox_b':
break; html = checkbox_b(size)
case 'checkbox_b': break;
html = checkbox_b(size) case 'radio':
break; html = radio(size)
case 'radio': break;
html = radio(size) case 'textarea':
break; html = textarea(size)
case 'textarea': break;
html = textarea(size) case 'submit':
break; html = submits(size)
case 'submit': break;
html = submits(size) case 'del':
break; $('form').html("\n")
case 'del': delHtml()
$('form').html("\n") $('.code-show').text('')
delHtml() return false
$('.code-show').text('') break;
return false default:
break; layer.msg('类型错误', {
default: icon: 2
layer.msg('类型错误',{icon:2}) })
} }
$('form').append(html); $('form').append(html);
form.render(); form.render();
setHtml(html) setHtml(html)
})
function delHtml() {
layui.data('form_html', {
key: 'html',
remove: true
});
}
}) function setHtml(html) {
var h = layui.data('form_html');
if (h && h.html) {
var _d = h.html + html
} else {
var _d = html
}
layui.data('form_html', {
key: 'html',
value: _d
})
$('.code-show').text('<form class="layui-form" action="" onsubmit="return false">\n' + _d + '</form>')
function delHtml() { }
layui.data('form_html', {
key: 'html'
,remove: true
});
}
function setHtml(html) { function input(type, size) {
var h = layui.data('form_html'); var name = type === 'text' ? '输入框' : (type === 'password' ? '密码框' : '');
if(h && h.html ){ var html = ' <div class="layui-form-item">\n' +
var _d = h.html+html ' <label class="layui-form-label">' + name + '</label>\n' +
}else{ ' <div class="layui-input-' + size + '">\n' +
var _d = html ' <input type="' + type + '" name="' + key + '" required lay-verify="required" placeholder="请输入' + name +
} '内容" autocomplete="off" class="layui-input">\n' +
layui.data('form_html',{ ' </div>\n' +
key:'html', ' </div>\n';
value:_d return html;
}) }
$('.code-show').text('<form class="layui-form" action="" onsubmit="return false">\n' +_d+ '</form>')
} function select(size) {
var html = ' <div class="layui-form-item">\n' +
' <label class="layui-form-label">选择框</label>\n' +
' <div class="layui-input-' + size + '">\n' +
' <select name="' + key + '" lay-verify="required" lay-search>\n' +
' <option value=""></option>\n' +
' <option value="0">北京</option>\n' +
' <option value="1">上海</option>\n' +
' <option value="2">广州</option>\n' +
' <option value="3">深圳</option>\n' +
' <option value="4">杭州</option>\n' +
' </select>\n' +
' </div>\n' +
' </div>\n';
return html;
}
function input(type,size) { function checkbox_a(size) {
var name = type==='text'?'输入框':(type==='password'?'密码框':''); var html = ' <div class="layui-form-item">\n' +
var html = ' <div class="layui-form-item">\n' + ' <label class="layui-form-label">复选框</label>\n' +
' <label class="layui-form-label">'+name+'</label>\n' + ' <div class="layui-input-' + size + '">\n' +
' <div class="layui-input-'+size+'">\n' + ' <input type="checkbox" name="' + key + '[]" title="写作">\n' +
' <input type="'+type+'" name="'+key+'" required lay-verify="required" placeholder="请输入'+name+'内容" autocomplete="off" class="layui-input">\n' + ' <input type="checkbox" name="' + key + '[]" title="阅读" checked>\n' +
' </div>\n' + ' <input type="checkbox" name="' + key + '[]" title="发呆">\n' +
' </div>\n'; ' </div>\n' +
return html; ' </div>\n';
} return html;
function select(size) { }
var html = ' <div class="layui-form-item">\n' +
' <label class="layui-form-label">选择框</label>\n' + function checkbox_b(size) {
' <div class="layui-input-'+size+'">\n' + var html = ' <div class="layui-form-item">\n' +
' <select name="'+key+'" lay-verify="required" lay-search>\n' + ' <label class="layui-form-label">开关</label>\n' +
' <option value=""></option>\n' + ' <div class="layui-input-' + size + '">\n' +
' <option value="0">北京</option>\n' + ' <input type="checkbox" name="' + key + '" lay-skin="switch">\n' +
' <option value="1">上海</option>\n' + ' </div>\n' +
' <option value="2">广州</option>\n' + ' </div>\n';
' <option value="3">深圳</option>\n' + return html;
' <option value="4">杭州</option>\n' + }
' </select>\n' +
' </div>\n' + function radio(size) {
' </div>\n'; var html = ' <div class="layui-form-item">\n' +
return html; ' <label class="layui-form-label">单选框</label>\n' +
} ' <div class="layui-input-' + size + '">\n' +
function checkbox_a(size) { ' <input type="radio" name="' + key + '" value="男" title="男">\n' +
var html = ' <div class="layui-form-item">\n' + ' <input type="radio" name="' + key + '" value="女" title="女" checked>\n' +
' <label class="layui-form-label">复选框</label>\n' + ' </div>\n' +
' <div class="layui-input-'+size+'">\n' + ' </div>\n';
' <input type="checkbox" name="'+key+'[]" title="写作">\n' + return html;
' <input type="checkbox" name="'+key+'[]" title="阅读" checked>\n' + }
' <input type="checkbox" name="'+key+'[]" title="发呆">\n' +
' </div>\n' + function textarea(size) {
' </div>\n'; var html = ' <div class="layui-form-item layui-form-text">\n' +
return html; ' <label class="layui-form-label">文本域</label>\n' +
} ' <div class="layui-input-' + size + '">\n' +
function checkbox_b(size) { ' <textarea name="' + key + '" placeholder="请输入内容" class="layui-textarea"></textarea>\n' +
var html = ' <div class="layui-form-item">\n' + ' </div>\n' +
' <label class="layui-form-label">开关</label>\n' + ' </div>\n';
' <div class="layui-input-'+size+'">\n' + return html;
' <input type="checkbox" name="'+key+'" lay-skin="switch">\n' + }
' </div>\n' +
' </div>\n'; function submits(size) {
return html; var html = ' <div class="layui-form-item">\n' +
} ' <div class="layui-input-' + size + '">\n' +
function radio(size) { ' <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>\n' +
var html = ' <div class="layui-form-item">\n' + ' <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
' <label class="layui-form-label">单选框</label>\n' + ' </div>\n' +
' <div class="layui-input-'+size+'">\n' + ' </div>\n';
' <input type="radio" name="'+key+'" value="男" title="男">\n' + return html;
' <input type="radio" name="'+key+'" value="女" title="女" checked>\n' + }
' </div>\n' +
' </div>\n'; function jscode() {
return html; var html = '<script>\n' +
} ' layui.use(\'form\', function(){\n' +
function textarea(size) { ' var form = layui.form;\n' +
var html = ' <div class="layui-form-item layui-form-text">\n' + ' form.on(\'submit(formDemo)\', function(data){\n' +
' <label class="layui-form-label">文本域</label>\n' + ' layer.msg(JSON.stringify(data.field));\n' +
' <div class="layui-input-'+size+'">\n' + ' return false;\n' +
' <textarea name="'+key+'" placeholder="请输入内容" class="layui-textarea"></textarea>\n' + ' });\n' +
' </div>\n' + ' });\n' +
' </div>\n'; '</script>';
return html; return html;
} }
function submits(size) {
var html = ' <div class="layui-form-item">\n' + function randStrName() {
' <div class="layui-input-'+size+'">\n' + return Math.random().toString(36).substr(8);
' <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>\n' + }
' <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' + var jscodehtml = jscode();
' </div>\n' + $('.js-show').text(jscodehtml)
' </div>\n'; form.on('submit(formDemo)', function(data) {
return html; layer.msg(JSON.stringify(data.field));
} return false;
function jscode() { });
var html = '<script>\n' + exports('design', {});
' layui.use(\'form\', function(){\n' + });
' var form = layui.form;\n' +
' form.on(\'submit(formDemo)\', function(data){\n' +
' layer.msg(JSON.stringify(data.field));\n' +
' return false;\n' +
' });\n' +
' });\n' +
'</script>';
return html;
}
function randStrName() {
return Math.random().toString(36).substr(8);
}
$('.click-but button').click()
var jscodehtml = jscode();
$('.js-show').text(jscodehtml)
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
exports('design', {});
});