diff --git a/component/code/css/style.css b/component/code/css/style.css index ef2986e..5d460a5 100644 --- a/component/code/css/style.css +++ b/component/code/css/style.css @@ -2,8 +2,8 @@ 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;} +.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;} .code-show{min-height: 454px;} -.js-show{min-height: 200px;} -.del-form{line-height: initial;position: absolute;right: 15px;top: 50%;margin-top: -15px;} \ No newline at end of file +.js-show{min-height: 200px;} \ No newline at end of file diff --git a/component/code/index.html b/component/code/index.html index 169e0cd..4d56315 100644 --- a/component/code/index.html +++ b/component/code/index.html @@ -15,27 +15,32 @@ + @@ -43,7 +48,7 @@
- + view
@@ -59,7 +64,7 @@
-
JS
+
code
diff --git a/component/pear/module/design.js b/component/pear/module/design.js index 43fd0f8..6bcf7ac 100644 --- a/component/pear/module/design.js +++ b/component/pear/module/design.js @@ -1,176 +1,182 @@ -/** - * 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}) - } +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) + $('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('\n' + _d + '') - 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('
\n' +_d+ '
') + function input(type, size) { + var name = type === 'text' ? '输入框' : (type === 'password' ? '密码框' : ''); + var html = '
\n' + + ' \n' + + '
\n' + + ' \n' + + '
\n' + + '
\n'; + return html; + } - } + function select(size) { + var html = '
\n' + + ' \n' + + '
\n' + + ' \n' + + '
\n' + + '
\n'; + return html; + } - function input(type,size) { - var name = type==='text'?'输入框':(type==='password'?'密码框':''); - var html = '
\n' + - ' \n' + - '
\n' + - ' \n' + - '
\n' + - '
\n'; - return html; - } - function select(size) { - var html = '
\n' + - ' \n' + - '
\n' + - ' \n' + - '
\n' + - '
\n'; - return html; - } - function checkbox_a(size) { - var html = '
\n' + - ' \n' + - '
\n' + - ' \n' + - ' \n' + - ' \n' + - '
\n' + - '
\n'; - return html; - } - function checkbox_b(size) { - var html = '
\n' + - ' \n' + - '
\n' + - ' \n' + - '
\n' + - '
\n'; - return html; - } - function radio(size) { - var html = '
\n' + - ' \n' + - '
\n' + - ' \n' + - ' \n' + - '
\n' + - '
\n'; - return html; - } - function textarea(size) { - var html = '
\n' + - ' \n' + - '
\n' + - ' \n' + - '
\n' + - '
\n'; - return html; - } - function submits(size) { - var html = '
\n' + - '
\n' + - ' \n' + - ' \n' + - '
\n' + - '
\n'; - return html; - } - function jscode() { - var html = ''; - 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', {}); -}); \ No newline at end of file + function checkbox_a(size) { + var html = '
\n' + + ' \n' + + '
\n' + + ' \n' + + ' \n' + + ' \n' + + '
\n' + + '
\n'; + return html; + } + + function checkbox_b(size) { + var html = '
\n' + + ' \n' + + '
\n' + + ' \n' + + '
\n' + + '
\n'; + return html; + } + + function radio(size) { + var html = '
\n' + + ' \n' + + '
\n' + + ' \n' + + ' \n' + + '
\n' + + '
\n'; + return html; + } + + function textarea(size) { + var html = '
\n' + + ' \n' + + '
\n' + + ' \n' + + '
\n' + + '
\n'; + return html; + } + + function submits(size) { + var html = '
\n' + + '
\n' + + ' \n' + + ' \n' + + '
\n' + + '
\n'; + return html; + } + + function jscode() { + var html = ''; + return html; + } + + function randStrName() { + return Math.random().toString(36).substr(8); + } + var jscodehtml = jscode(); + $('.js-show').text(jscodehtml) + form.on('submit(formDemo)', function(data) { + layer.msg(JSON.stringify(data.field)); + return false; + }); + exports('design', {}); +});