开发工具 -- 表单构建
就眠仪式
parent
2e37dad2eb
commit
90f8b0a306
|
|
@ -5,7 +5,7 @@
|
|||
"icon": "layui-icon layui-icon-console",
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 0,
|
||||
"id": 10,
|
||||
"title": "控制后台",
|
||||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 1,
|
||||
|
|
@ -217,7 +217,7 @@
|
|||
{
|
||||
"id": "error",
|
||||
"title": "错误页面",
|
||||
"icon": "layui-icon layui-icon-auz",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
|
|
@ -312,5 +312,20 @@
|
|||
"openType": "_iframe",
|
||||
"href": "view/system/space.html"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"id": "code",
|
||||
"title": "开发工具",
|
||||
"icon": "layui-icon layui-icon-util",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 801,
|
||||
"title": "表单构建",
|
||||
"icon": "layui-icon layui-icon-util",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "component/code/index.html"
|
||||
}]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
html,body{background-color: whitesmoke}
|
||||
.layui-fluid{margin-top: 15px;}
|
||||
.content{min-height: 796px;}
|
||||
.nav{text-align: center;}
|
||||
.nav button{margin-bottom: 3px;width: 100%;margin-top: 3px;margin-bottom: 3px;}
|
||||
.layui-card-body .layui-btn+.layui-btn{margin-left: 0px;}
|
||||
.code-show{min-height: 454px;}
|
||||
.js-show{min-height: 200px;}
|
||||
.del-form{line-height: initial;position: absolute;right: 15px;top: 50%;margin-top: -15px;}
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>layui表单生成器</title>
|
||||
<link rel="stylesheet" href="../pear/css/pear.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="layui-fluid">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md1">
|
||||
<div class="layui-card nav click-but">
|
||||
<div class="layui-card-header">长</div>
|
||||
<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 pear-btn-primary" 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 pear-btn-primary" 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 pear-btn-primary" 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 pear-btn-primary" plain data-size="block" data-type="submit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card nav">
|
||||
<div class="layui-card-header">短</div>
|
||||
<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 pear-btn-primary" 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 pear-btn-primary" 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 pear-btn-primary" 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 pear-btn-primary" plain data-size="block" data-type="submit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="layui-col-md5">
|
||||
<div class="layui-card content">
|
||||
<div class="layui-card-header">
|
||||
<button class="pear-btn pear-btn-danger pear-btn-sm del-form" data-type="del"> <i class="layui-icon"></i></button>
|
||||
</div>
|
||||
<div class="layui-card-body code">
|
||||
<form class="layui-form" action="" onsubmit="return false">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card r-code-html">
|
||||
<div class="layui-card-header">html</div>
|
||||
<div class="layui-card-body">
|
||||
<textarea name="" class="layui-textarea code-show"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card r-code-js">
|
||||
<div class="layui-card-header">JS</div>
|
||||
<div class="layui-card-body">
|
||||
<textarea name="" class="layui-textarea js-show"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript" src="../layui/layui.js"></script>
|
||||
<script type="text/javascript" src="../pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use('design');
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
/**
|
||||
* time: 2018年11月21日 15:25:32
|
||||
* author: dbag
|
||||
* blog: http://www.cnblogs.com/phper8/
|
||||
*/
|
||||
layui.define(['layer', 'form'], function(exports){
|
||||
var layer = layui.layer,form = layui.form,$ = layui.$,key = '';
|
||||
delHtml()
|
||||
$('button').on('click',function(){
|
||||
var _this = $(this),
|
||||
size = _this.data('size'),
|
||||
type = _this.data('type'),
|
||||
html = '';
|
||||
key = randStrName();
|
||||
switch (type) {
|
||||
case 'text':
|
||||
html = input(type,size)
|
||||
break;
|
||||
case 'password':
|
||||
html = input(type,size)
|
||||
break;
|
||||
case 'select':
|
||||
html = select(size)
|
||||
break;
|
||||
case 'checkbox_a':
|
||||
html = checkbox_a(size)
|
||||
break;
|
||||
case 'checkbox_b':
|
||||
html = checkbox_b(size)
|
||||
break;
|
||||
case 'radio':
|
||||
html = radio(size)
|
||||
break;
|
||||
case 'textarea':
|
||||
html = textarea(size)
|
||||
break;
|
||||
case 'submit':
|
||||
html = submits(size)
|
||||
break;
|
||||
case 'del':
|
||||
$('form').html("\n")
|
||||
delHtml()
|
||||
$('.code-show').text('')
|
||||
return false
|
||||
break;
|
||||
default:
|
||||
layer.msg('类型错误',{icon:2})
|
||||
}
|
||||
|
||||
$('form').append(html);
|
||||
form.render();
|
||||
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 input(type,size) {
|
||||
var name = type==='text'?'输入框':(type==='password'?'密码框':'');
|
||||
var html = ' <div class="layui-form-item">\n' +
|
||||
' <label class="layui-form-label">'+name+'</label>\n' +
|
||||
' <div class="layui-input-'+size+'">\n' +
|
||||
' <input type="'+type+'" name="'+key+'" required lay-verify="required" placeholder="请输入'+name+'内容" autocomplete="off" class="layui-input">\n' +
|
||||
' </div>\n' +
|
||||
' </div>\n';
|
||||
return html;
|
||||
}
|
||||
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 checkbox_a(size) {
|
||||
var html = ' <div class="layui-form-item">\n' +
|
||||
' <label class="layui-form-label">复选框</label>\n' +
|
||||
' <div class="layui-input-'+size+'">\n' +
|
||||
' <input type="checkbox" name="'+key+'[]" title="写作">\n' +
|
||||
' <input type="checkbox" name="'+key+'[]" title="阅读" checked>\n' +
|
||||
' <input type="checkbox" name="'+key+'[]" title="发呆">\n' +
|
||||
' </div>\n' +
|
||||
' </div>\n';
|
||||
return html;
|
||||
}
|
||||
function checkbox_b(size) {
|
||||
var html = ' <div class="layui-form-item">\n' +
|
||||
' <label class="layui-form-label">开关</label>\n' +
|
||||
' <div class="layui-input-'+size+'">\n' +
|
||||
' <input type="checkbox" name="'+key+'" lay-skin="switch">\n' +
|
||||
' </div>\n' +
|
||||
' </div>\n';
|
||||
return html;
|
||||
}
|
||||
function radio(size) {
|
||||
var html = ' <div class="layui-form-item">\n' +
|
||||
' <label class="layui-form-label">单选框</label>\n' +
|
||||
' <div class="layui-input-'+size+'">\n' +
|
||||
' <input type="radio" name="'+key+'" value="男" title="男">\n' +
|
||||
' <input type="radio" name="'+key+'" value="女" title="女" checked>\n' +
|
||||
' </div>\n' +
|
||||
' </div>\n';
|
||||
return html;
|
||||
}
|
||||
function textarea(size) {
|
||||
var html = ' <div class="layui-form-item layui-form-text">\n' +
|
||||
' <label class="layui-form-label">文本域</label>\n' +
|
||||
' <div class="layui-input-'+size+'">\n' +
|
||||
' <textarea name="'+key+'" placeholder="请输入内容" class="layui-textarea"></textarea>\n' +
|
||||
' </div>\n' +
|
||||
' </div>\n';
|
||||
return html;
|
||||
}
|
||||
function submits(size) {
|
||||
var html = ' <div class="layui-form-item">\n' +
|
||||
' <div class="layui-input-'+size+'">\n' +
|
||||
' <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>\n' +
|
||||
' <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
|
||||
' </div>\n' +
|
||||
' </div>\n';
|
||||
return html;
|
||||
}
|
||||
function jscode() {
|
||||
var html = '<script>\n' +
|
||||
' 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', {});
|
||||
});
|
||||
|
|
@ -28,5 +28,6 @@ layui.config({
|
|||
area:"area",
|
||||
count:"count",
|
||||
topBar: "topBar",
|
||||
button: "button"
|
||||
button: "button",
|
||||
design: "design"
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue