动态生成模板（模板生成器）
2024-06-03 02:12:35
1.html
<!DOCTYPE HTML><html><head> <title>模板库</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="/static/css/bootstrap-ie6.css"> <![endif]--> <!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="/static/css/ie.css"> <![endif]--> <link href="/static/css/site.css" rel="stylesheet" type="text/css" /> <link href="/static/js/skin/layer.css" rel="stylesheet" type="text/css" /> <link href="/static/css/font-awesome.css?v=4.4.0" rel="stylesheet"> <link href="/static/css/animate.css" rel="stylesheet"> <link href="/static/css/style.css?v=4.1.0" rel="stylesheet"> <!-- 公用css --> <link rel="stylesheet" type="text/css" href="/static/css/main.css"> <link rel="stylesheet" type="text/css" href="/static/css/mike.css"> <style> /*mike*/ #components{ min-height: 600px; } #target{ min-height: 200px; border: 1px solid #ccc; padding: 5px; } #target .component{ border: 1px solid #fff; } .popover-content form { margin: 0 auto; } .popover-content form .btn{ margin-right: 10px } #source{ min-height: 500px; } .row { margin-left: 0px; } .form-horizontal .control-label { float: left; width: 60px; padding-top: 5px; text-align: right; } .form-horizontal .controls { margin-left: 90px; } .container{ width:100%; } #newModule{ width:720px; } /*滑动按钮*/ .switch{ width: 60px; } .btn_fath{ position: relative; border-radius: 20px; } .btn1{ float: left; } .btn2{ float: right; } .btnSwitch{ height: 24px; width: 30px; border:none; color: #fff; line-height: 24px; font-size: 12px; text-align: center; z-index: 1; } .move{ z-index: 100; width: 22px; border-radius: 20px; height: 22px; position: absolute; cursor: pointer; border: 1px solid #828282; background-color: #f1eff0; box-shadow: 1px 2px 2px 1px #fff inset,0 0 5px 1px #999; } .on .move{ left: 36px; } .off.btn_fath{ background-color: #828282; } .on.btn_fath{ background-color: #78BC27; } #dingYue,.switch{ float: left; } #newModuleName,#statusBtn{ margin:20px 20px; } .nav > li > a { color: #ccc; } #controlDesigner #components .control-group.component{ margin-bottom: 10px; } #controlDesigner{ height: 630px; } #newModule .clearfix{ width: 540px; } #build{ padding-left: 20px; } #target{ padding-left: 60px; min-height: 430px; } .popover { position: absolute; top:120px; } </style></head><body><input type="hidden" id="subscribe" value="true"/><div class="container"> <div class="row clearfix"> <div class="span6" id="newModule"> <div class="clearfix"> <input type="text" style="width:500px" placeholder="请输入创建的模块标题" id="newModuleName"/><br/> <!--<h5>我的模板</h5>--> <hr> <div id="build"> <form id="target" class="form-horizontal"> <fieldset> <div id="legend" class="component" rel="popover" title="编辑属性" trigger="manual" data-content=" <form class='form'> <div class='controls'> <label class='control-label'>表单名称</label> <input type='text' id='orgvalue' placeholder='请输入表单名称'> <hr/> <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button> </div> </form>" > <input type="hidden" name="form_name" value="" class="leipiplugins" leipiplugins="form_name"/> <!--<legend class="leipiplugins-orgvalue" id="newModuleName">点击修改模块名</legend>--> </div> </fieldset> </form> </div> </div> </div> <div class="span6" id="controlDesigner"> <h5>拖拽下面的单个模块到左侧(通过拖拽到右侧可取消模块)</h5> <hr> <div class="tabbable"> <ul class="nav nav-tabs" id="navtab"> <li class="active"><a href="#1" data-toggle="tab">常用控件</a></li> <li class><a href="#2" data-toggle="tab">定制控件</a></li> <li class><a id="sourcetab" href="#5" data-toggle="tab">源代码</a></li> </ul> <form class="form-horizontal" id="components"> <fieldset> <div class="tab-content"> <div class="tab-pane active" id="1"> <!-- Text start --> <div class="control-group component" rel="popover" title="文本框控件" trigger="manual" data-content=" <form class='form'> <div class='controls'> <label class='control-label'>控件标题</label> <input type='text' id='orgname' placeholder='必填项'> <label class='control-label'>控件名称</label> <input type='text' id='name' placeholder='以字母为开头且控件名称不能重复'> <label class='control-label'>默认值</label> <input type='text' id='orgvalue' placeholder='默认值'> <hr/> <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button> </div> </form>" > <!-- Text --> <label class="control-label leipiplugins-orgname">文本框</label> <div class="controls"> <input name="" type="text" placeholder="默认值" title="文本框" value="" class="leipiplugins" leipiplugins="text"/> </div> </div> <!-- Text end --> <!-- Textarea start --> <div class="control-group component" rel="popover" title="多行文本控件" trigger="manual" data-content=" <form class='form'> <div class='controls'> <label class='control-label'>控件标题</label> <input type='text' id='orgname' placeholder='必填项'> <label class='control-label'>控件名称</label> <input type='text' id='name' placeholder='以字母为开头且控件名称不能重复'> <label class='control-label'>默认值</label> <input type='text' id='orgvalue' placeholder='默认值'> <hr/> <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button> </div> </form>" > <!-- Textarea --> <label class="control-label leipiplugins-orgname">多行文本</label> <div class="controls"> <div class="textarea"> <textarea title="多行文本" name="" class="leipiplugins" leipiplugins="textarea"> </textarea> </div> </div> </div> <!-- Textarea end --> <!-- Select start --> <div class="control-group component" rel="popover" title="下拉控件" trigger="manual" data-content="<form class='form'><div class='controls'> <label class='control-label'>控件标题</label> <input type='text' id='orgname' placeholder='必填项'> <label class='control-label'>控件名称</label> <input type='text' id='name' placeholder='以字母为开头且控件名称不能重复'> <label class='control-label'>下拉选项</label> <textarea style='min-height: 200px' id='orgvalue'></textarea> <p class='help-block'>一行一个选项</p> <hr/> <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button></div></form>" > <!-- Select --> <label class="control-label leipiplugins-orgname">下拉菜单</label> <div class="controls"> <select name="" title="下拉菜单" class="leipiplugins" leipiplugins="select"> <option>选项一</option> <option>选项二</option> <option>选项三</option> </select> </div>
</div> <!-- Select end --> <!-- Select start --> <div class="control-group component" rel="popover" title="多选下拉控件" trigger="manual" data-content="<form class='form'><div class='controls'> <label class='control-label'>控件标题</label> <input type='text' id='orgname' placeholder='必填项'> <label class='control-label'>控件名称</label> <input type='text' id='name' placeholder='以字母为开头且控件名称不能重复'> <label class='control-label'>下拉选项</label> <textarea style='min-height: 200px' id='orgvalue'></textarea> <p class='help-block'>一行一个选项</p> <hr/> <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button></div></form>" > <!-- Select --> <label class="control-label leipiplugins-orgname">下拉菜单</label> <div class="controls"> <select multiple="multiple" name="" title="下拉菜单" class="leipiplugins" leipiplugins="select"> <option>选项一</option> <option>选项二</option> <option>选项三</option> <option>选项四</option> </select> </div>
</div> <!-- Select end --> <!-- Multiple Checkboxes start --> <div class="control-group component" rel="popover" title="复选控件" trigger="manual" data-content="<form class='form'><div class='controls'> <label class='control-label'>控件标题</label> <input type='text' id='orgname' placeholder='必填项'> <label class='control-label'>控件名称</label> <input type='text' id='name' placeholder='以字母为开头且控件名称不能重复'> <label class='control-label'>复选框</label> <textarea style='min-height: 200px' id='orgvalue'></textarea> <p class='help-block'>一行一个选项</p> <hr/> <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button></div></form>" > <label class="control-label leipiplugins-orgname">复选框</label> <div class="controls leipiplugins-orgvalue"> <!-- Multiple Checkboxes --> <label class="checkbox inline"> <input type="checkbox" name="" title="复选框" value="选项1" class="leipiplugins" leipiplugins="checkbox" orginline="inline"> 选项1 </label> <label class="checkbox inline"> <input type="checkbox" name="" title="复选框" value="选项2" class="leipiplugins" leipiplugins="checkbox" orginline="inline"> 选项2 </label> </div>
</div> <div class="control-group component" rel="popover" title="复选控件" trigger="manual" data-content="<form class='form'><div class='controls'> <label class='control-label'>控件标题</label> <input type='text' id='orgname' placeholder='必填项'> <label class='control-label'>控件名称</label> <input type='text' id='name' placeholder='以字母为开头且控件名称不能重复'> <label class='control-label'>复选框</label> <textarea style='min-height: 200px' id='orgvalue'></textarea> <p class='help-block'>一行一个选项</p> <hr/> <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button></div></form>" > <label class="control-label leipiplugins-orgname">复选框</label> <div class="controls leipiplugins-orgvalue"> <!-- Multiple Checkboxes --> <label class="checkbox"> <input type="checkbox" name="" title="复选框" value="选项1" class="leipiplugins" leipiplugins="checkbox"> 选项1 </label> <label class="checkbox"> <input type="checkbox" name="" title="复选框" value="选项2" class="leipiplugins" leipiplugins="checkbox"> 选项2 </label> </div> </div> <!-- Multiple Checkboxes end --> <!-- Multiple radios start --> <div class="control-group component" rel="popover" title="单选控件" trigger="manual" data-content="<form class='form'><div class='controls'> <label class='control-label'>控件标题</label> <input type='text' id='orgname' placeholder='必填项'> <label class='control-label'>控件名称</label> <input type='text' id='name' placeholder='以字母为开头且控件名称不能重复'> <label class='control-label'>单选框</label> <textarea style='min-height: 200px' id='orgvalue'></textarea> <p class='help-block'>一行一个选项</p> <hr/> <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button></div></form>" > <label class="control-label leipiplugins-orgname">单选</label> <div class="controls leipiplugins-orgvalue"> <!-- Multiple Checkboxes --> <label class="radio inline"> <input type="radio" name="" title="单选框" value="选项1" class="leipiplugins" leipiplugins="radio" orginline="inline"> 选项1 </label> <label class="radio inline"> <input type="radio" name="" title="单选框" value="选项2" class="leipiplugins" leipiplugins="radio" orginline="inline"> 选项2 </label> </div> </div> <div class="control-group component" rel="popover" title="单选控件" trigger="manual" data-content="<form class='form'><div class='controls'> <label class='control-label'>控件标题</label> <input type='text' id='orgname' placeholder='必填项'> <label class='control-label'>控件名称</label> <input type='text' id='name' placeholder='以字母为开头且控件名称不能重复'> <label class='control-label'>单选框</label> <textarea style='min-height: 200px' id='orgvalue'></textarea> <p class='help-block'>一行一个选项</p> <hr/> <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button></div></form>" > <label class="control-label leipiplugins-orgname">单选</label> <div class="controls leipiplugins-orgvalue"> <!-- Multiple Checkboxes --> <label class="radio"> <input type="radio" name="" title="单选框" value="选项1" class="leipiplugins" leipiplugins="radio"> 选项1 </label> <label class="radio"> <input type="radio" name="" title="单选框" value="选项2" class="leipiplugins" leipiplugins="radio"> 选项2 </label> </div> </div> <!-- Multiple radios end --> </div> <div class="tab-pane" id="2"> <div class="control-group component" rel="popover" title="文件上传" trigger="manual" data-content=" <form class='form'> <div class='controls'> <label class='control-label'>控件标题</label> <input type='text' id='orgname' placeholder='必填项'> <label class='control-label'>控件名称</label> <input type='text' id='name' placeholder='以字母为开头且控件名称不能重复'> <hr/> <button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button> </div> </form>" > <label class="control-label leipiplugins-orgname">文件上传</label>
<!-- File Upload --> <div> <input type="file" name="" title="文件上传" class="leipiplugins" leipiplugins="uploadfile"> </div> </div> </div> <div class="tab-pane" id="5"> <textarea id="source" class="span6"></textarea> </div> </div> </fieldset> <div id="statusBtn"> <span id="dingYue" style="width:40px">订阅</span> <div class="switch"> <div class="btn_fath clearfix off" οnclick="toogle(this)"> <div class="move" data-state="off"></div> <div class="btnSwitch btn1">ON</div> <div class="btnSwitch btn2 ">OFF</div> </div> </div> <div style="clear: both"></div> </div> </form> </div> </div> </div></div><div style="text-align: center" class="saveModule"> <input type="button" class="btn btn-info" value="保存模板" οnclick="saveModules();"/></div><script src="/static/js/jquery.min.js?v=2.1.4" type="text/javascript" ></script><script src="/static/js/layer.min.js" type="text/javascript" ></script><script src="/static/js/z_packge.js" type="text/javascript" ></script><script src="/static/js/bootstrap.js" type="text/javascript" ></script><script src="/static/js/core.js" type="text/javascript" ></script><script type="text/javascript" charset="utf-8" src="/static/js/plugins.js"></script></body></html>
2.js
/*e.preventDefault();//阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交*/
/* 文本框控件 text acc 是 class="component" 的DIV e 是 class="leipiplugins" 的控件 */LPB.plugins['text'] = function (active_component,leipiplugins) { console.log(this); var plugins = 'text',popover = $(".popover"); //右弹form 初始化值 $(popover).find("#orgname").val($(leipiplugins).attr("title")); var name=$(popover).find("#name").val($(leipiplugins).val()); $(popover).find("#orgname").val(name.attr("name")); $(popover).find("#orgvalue").val($(leipiplugins).val()); //右弹form 取消控件 $(popover).delegate(".btn-danger", "click", function(e){ active_component.popover("hide"); }); //右弹form 确定控件 $(popover).delegate(".btn-info", "click", function(e){ var reg=/^(?:(?!\s).){1,}$/g; var reg2=/^[a-zA-Z][^\u4e00-\u9fa5][a-zA-Z\d]{0,}$/g; var name1=$(popover).find("#orgname").val(); var name2=$(popover).find("#name").val(); var imputLists=$('#target').find("input,select,textarea"); var nameSame=false; $.each(imputLists,function(index,ipt){ var iptName=$(ipt).attr("name"); console.log(iptName); if(iptName===name2){ nameSame=true; } }); if((reg.test(name1))===false){ layer.tips('请输入正确格式', $("#orgname"), { tips: [1,"#F26C4F"] }); return false; } if((reg2.test(name2))===false){ layer.tips('请输入正确格式', $("#name"), { tips: [1,"#F26C4F"] }); return false; } if(nameSame===true){ layer.tips('name已存在，请重新输入', $("#name"), { tips: [1,"#F26C4F"] }); return false; }
var inputs = $(popover).find("input"); if($(popover).find("textarea").length>0) { inputs.push($(popover).find("textarea")[0]); } $.each(inputs, function(i,e){ var attr_name = $(e).attr("id");//属性名称 var attr_val = $(e).val(); switch(attr_name) { //要break case 'orgvalue': //$(leipiplugins).val(attr_val); $(leipiplugins).attr("value", attr_val); break; //没有break case 'orgname': $(leipiplugins).attr("title",attr_val); active_component.find(".leipiplugins-orgname").text(attr_val); break; default: $(leipiplugins).attr(attr_name, attr_val); } active_component.popover("hide"); LPB.genSource();//重置源代码 }); });}/* 多行文本框控件 textarea acc 是 class="component" 的DIV e 是 class="leipiplugins" 的控件 */LPB.plugins['textarea'] = function (active_component,leipiplugins) { var plugins = 'textarea',popover = $(".popover"); //右弹form 初始化值 $(popover).find("#orgname").val($(leipiplugins).attr("title")); var name=$(popover).find("#name").val($(leipiplugins).val()); $(popover).find("#orgname").val(name.attr("name")); $(popover).find("#orgvalue").val($(leipiplugins).val()); //右弹form 取消控件 $(popover).delegate(".btn-danger", "click", function(e){ active_component.popover("hide"); }); //右弹form 确定控件 $(popover).delegate(".btn-info", "click", function(e){ var reg=/^(?:(?!\s).){1,}$/g; var reg2=/^[a-zA-Z][^\u4e00-\u9fa5][a-zA-Z\d]{0,}$/g; var name1=$(popover).find("#orgname").val(); var name2=$(popover).find("#name").val(); var imputLists=$('#target').find("input,select,textarea"); var nameSame=false; $.each(imputLists,function(index,ipt){ var iptName=$(ipt).attr("name"); console.log(iptName); if(iptName===name2){ nameSame=true; } }); if((reg.test(name1))===false){ layer.tips('请输入正确格式', $("#orgname"), { tips: [1,"#F26C4F"] }); return false; } if((reg2.test(name2))===false){ layer.tips('请输入正确格式', $("#name"), { tips: [1,"#F26C4F"] }); return false; } if(nameSame===true){ layer.tips('name已存在，请重新输入', $("#name"), { tips: [1,"#F26C4F"] }); return false; }
var inputs = $(popover).find("input"); if($(popover).find("textarea").length>0) { inputs.push($(popover).find("textarea")[0]); } $.each(inputs, function(i,e){ var attr_name = $(e).attr("id");//属性名称 var attr_val = $(e).val(); switch(attr_name) { //要break case 'orgvalue': //$(leipiplugins).val(attr_val); $(leipiplugins).text(attr_val); break; //没有break case 'orgname': $(leipiplugins).attr("title",attr_val); active_component.find(".leipiplugins-orgname").text(attr_val); default: $(leipiplugins).attr(attr_name, attr_val); } active_component.popover("hide"); LPB.genSource();//重置源代码 });
});}/* 下拉框控件 select acc 是 class="component" 的DIV e 是 class="leipiplugins" 的控件 */LPB.plugins['select'] = function (active_component,leipiplugins) { var plugins = 'select',popover = $(".popover"); //右弹form 初始化值 $(popover).find("#orgname").val($(leipiplugins).attr("title")); var name=$(popover).find("#name").val($(leipiplugins).val()); var name2=$(popover).find("#name").val(''); $(popover).find("#orgname").val(name2.attr("name")); var val = $.map($(leipiplugins).find("option"), function(e,i){return $(e).text()}); val = val.join("\r"); $(popover).find("#orgvalue").text(val); //右弹form 取消控件 $(popover).delegate(".btn-danger", "click", function(e){ active_component.popover("hide"); }); //右弹form 确定控件 $(popover).delegate(".btn-info", "click", function(e){ var reg=/^(?:(?!\s).){1,}$/g; var reg2=/^[a-zA-Z][^\u4e00-\u9fa5][a-zA-Z\d]{0,}$/g; var name1=$(popover).find("#orgname").val(); var name2=$(popover).find("#name").val(); var imputLists=$('#target').find("input,select,textarea"); var nameSame=false; $.each(imputLists,function(index,ipt){ var iptName=$(ipt).attr("name"); console.log(iptName); if(iptName===name2){ nameSame=true; } }); if((reg.test(name1))===false){ layer.tips('请输入正确格式', $("#orgname"), { tips: [1,"#F26C4F"] }); return false; } if((reg2.test(name2))===false){ layer.tips('请输入正确格式', $("#name"), { tips: [1,"#F26C4F"] }); return false; } if(nameSame===true){ layer.tips('name已存在，请重新输入', $("#name"), { tips: [1,"#F26C4F"] }); return false; }
var inputs = $(popover).find("input"); if($(popover).find("textarea").length>0) { inputs.push($(popover).find("textarea")[0]); } $.each(inputs, function(i,e){ var attr_name = $(e).attr("id");//属性名称 var attr_val = $(e).val(); switch(attr_name) { //要break case 'orgvalue': var options = attr_val.split("\n"); $(leipiplugins).html(""); $.each(options, function(i,e){ $(leipiplugins).append("\n "); $(leipiplugins).append($("<option>").text(e)); }); //$(leipiplugins).text(attr_val); break; case 'orgname': $(leipiplugins).attr("title",attr_val); active_component.find(".leipiplugins-orgname").text(attr_val); break; default: $(leipiplugins).attr(attr_name, attr_val); } active_component.popover("hide"); LPB.genSource();//重置源代码 }); });}/* 复选控件 checkbox acc 是 class="component" 的DIV e 是 class="leipiplugins" 的控件 */LPB.plugins['checkbox'] = function (active_component,leipiplugins) { var plugins = 'checkbox',popover = $(".popover"); //右弹form 初始化值 $(popover).find("#orgname").val($(leipiplugins).attr("title")); var name=$(popover).find("#name").val($(leipiplugins).val()); $(popover).find("#orgname").val(name.attr("name")); val = $.map($(leipiplugins), function(e,i){return $(e).val().trim()}); val = val.join("\r"); $(popover).find("#orgvalue").text(val); //右弹form 取消控件 $(popover).delegate(".btn-danger", "click", function(e){ active_component.popover("hide"); }); //右弹form 确定控件 $(popover).delegate(".btn-info", "click", function(e){ var reg=/^(?:(?!\s).){1,}$/g; var reg2=/^[a-zA-Z][^\u4e00-\u9fa5][a-zA-Z\d]{0,}$/g; var name1=$(popover).find("#orgname").val(); var name2=$(popover).find("#name").val(); var imputLists=$('#target').find("input,select,textarea"); var nameSame=false; $.each(imputLists,function(index,ipt){ var iptName=$(ipt).attr("name"); console.log(iptName); if(iptName===name2){ nameSame=true; } }); if((reg.test(name1))===false){ layer.tips('请输入正确格式', $("#orgname"), { tips: [1,"#F26C4F"] }); return false; } if((reg2.test(name2))===false){ layer.tips('请输入正确格式', $("#name"), { tips: [1,"#F26C4F"] }); return false; } if(nameSame===true){ layer.tips('name已存在，请重新输入', $("#name"), { tips: [1,"#F26C4F"] }); return false; }
var inputs = $(popover).find("input"); if($(popover).find("textarea").length>0) { inputs.push($(popover).find("textarea")[0]); } $.each(inputs, function(i,e){ var attr_name = $(e).attr("id");//属性名称 var attr_val = $(e).val(); switch(attr_name) { //要break case 'orgvalue': var checkboxes = attr_val.split("\n"); var html = "<!-- Multiple Checkboxes -->\n"; $.each(checkboxes, function(i,e){ if(e.length > 0){ var vName = $(leipiplugins).eq(i).attr("name"),vTitle = $(leipiplugins).eq(i).attr("title"),orginline = $(leipiplugins).eq(i).attr("orginline"); if(!vName) vName = ''; if(!vTitle) vTitle = ''; if(!orginline) orginline = ''; html += '<label class="checkbox '+orginline+'">\n<input type="checkbox" name="'+vName+'" title="'+vTitle+'" value="'+e+'" orginline="'+orginline+'" class="leipiplugins" leipiplugins="checkbox" >'+e+'\n</label>'; } $(active_component).find(".leipiplugins-orgvalue").html(html); }); break;
case 'orgname': $(leipiplugins).attr("title",attr_val); active_component.find(".leipiplugins-orgname").text(attr_val); break; default: $(leipiplugins).attr(attr_name, attr_val); } active_component.popover("hide"); LPB.genSource();//重置源代码 }); });}
/* 复选控件 radio acc 是 class="component" 的DIV e 是 class="leipiplugins" 的控件 */LPB.plugins['radio'] = function (active_component,leipiplugins) { var plugins = 'radio',popover = $(".popover"); //右弹form 初始化值 $(popover).find("#orgname").val($(leipiplugins).attr("title")); var name=$(popover).find("#name").val($(leipiplugins).val()); $(popover).find("#orgname").val(name.attr("name")); val = $.map($(leipiplugins), function(e,i){return $(e).val().trim()}); val = val.join("\r"); $(popover).find("#orgvalue").text(val); //右弹form 取消控件 $(popover).delegate(".btn-danger", "click", function(e){ active_component.popover("hide"); }); //右弹form 确定控件 $(popover).delegate(".btn-info", "click", function(e){ var reg=/^(?:(?!\s).){1,}$/g; var reg2=/^[a-zA-Z][^\u4e00-\u9fa5][a-zA-Z\d]{0,}$/g; var name1=$(popover).find("#orgname").val(); var name2=$(popover).find("#name").val(); var imputLists=$('#target').find("input,select,textarea"); var nameSame=false; $.each(imputLists,function(index,ipt){ var iptName=$(ipt).attr("name"); console.log(iptName); if(iptName===name2){ nameSame=true; } }); if((reg.test(name1))===false){ layer.tips('请输入正确格式', $("#orgname"), { tips: [1,"#F26C4F"] }); return false; } if((reg2.test(name2))===false){ layer.tips('请输入正确格式', $("#name"), { tips: [1,"#F26C4F"] }); return false; } if(nameSame===true){ layer.tips('name已存在，请重新输入', $("#name"), { tips: [1,"#F26C4F"] }); return false; }
var inputs = $(popover).find("input"); if($(popover).find("textarea").length>0) { inputs.push($(popover).find("textarea")[0]); } $.each(inputs, function(i,e){ var attr_name = $(e).attr("id");//属性名称 var attr_val = $(e).val(); switch(attr_name) { //要break case 'orgvalue': var checkboxes = attr_val.split("\n"); var html = "<!-- Multiple Checkboxes -->\n"; $.each(checkboxes, function(i,e){ if(e.length > 0){ var vName = $(leipiplugins).eq(i).attr("name"),vTitle = $(leipiplugins).eq(i).attr("title"),orginline = $(leipiplugins).eq(i).attr("orginline"); if(!vName) vName = ''; if(!vTitle) vTitle = ''; if(!orginline) orginline = ''; html += '<label class="radio '+orginline+'">\n<input type="radio" name="'+vName+'" title="'+vTitle+'" value="'+e+'" orginline="'+orginline+'" class="leipiplugins" leipiplugins="radio" >'+e+'\n</label>'; } $(active_component).find(".leipiplugins-orgvalue").html(html); }); break; case 'orgname': $(leipiplugins).attr("title",attr_val); active_component.find(".leipiplugins-orgname").text(attr_val); break; default: $(leipiplugins).attr(attr_name, attr_val); } active_component.popover("hide"); LPB.genSource();//重置源代码 });
});}
/* 上传控件 uploadfile acc 是 class="component" 的DIV e 是 class="leipiplugins" 的控件 */LPB.plugins['uploadfile'] = function (active_component,leipiplugins) { var plugins = 'uploadfile',popover = $(".popover"); //右弹form 初始化值 $(popover).find("#orgname").val($(leipiplugins).attr("title")); var name=$(popover).find("#name").val($(leipiplugins).val()); $(popover).find("#orgname").val(name.attr("name")); //右弹form 取消控件 $(popover).delegate(".btn-danger", "click", function(e){ active_component.popover("hide"); }); //右弹form 确定控件 $(popover).delegate(".btn-info", "click", function(e){ var reg=/^(?:(?!\s).){1,}$/g; var reg2=/^[a-zA-Z][^\u4e00-\u9fa5][a-zA-Z\d]{0,}$/g; var name1=$(popover).find("#orgname").val(); var name2=$(popover).find("#name").val(); var imputLists=$('#target').find("input,select,textarea"); var nameSame=false; $.each(imputLists,function(index,ipt){ var iptName=$(ipt).attr("name"); console.log(iptName); if(iptName===name2){ nameSame=true; } }); if((reg.test(name1))===false){ layer.tips('请输入正确格式', $("#orgname"), { tips: [1,"#F26C4F"] }); return false; } if((reg2.test(name2))===false){ layer.tips('请输入正确格式', $("#name"), { tips: [1,"#F26C4F"] }); return false; } if(nameSame===true){ layer.tips('name已存在，请重新输入', $("#name"), { tips: [1,"#F26C4F"] }); return false; } console.log(e); var inputs = $(popover).find("input"); if($(popover).find("textarea").length>0) { inputs.push($(popover).find("textarea")[0]); } $.each(inputs, function(i,e){ var attr_name = $(e).attr("id");//属性名称 var attr_val = $(e).val(); switch(attr_name) { case 'orgname': $(leipiplugins).attr("title",attr_val); active_component.find(".leipiplugins-orgname").text(attr_val); break; default: $(leipiplugins).attr(attr_name, attr_val); } active_component.popover("hide"); LPB.genSource();//重置源代码 }); });}
function toogle(th){ var ele = $(th).children(".move"); if(ele.attr("data-state") == "on"){ ele.animate({left: "0"}, 300, function(){ ele.attr("data-state", "off"); var subscribe=$('#subscribe').val('false'); }); $(th).removeClass("on").addClass("off"); }else if(ele.attr("data-state") == "off"){ ele.animate({left: '36px'}, 300, function(){ $(this).attr("data-state", "on"); var subscribe=$('#subscribe').val('true'); }); $(th).removeClass("off").addClass("on"); }}function saveModules() { var imputLists=$('#target').find("input,select,textarea"); var nameSame=false; $.each(imputLists,function(index,ipt){ var iptName=$(ipt).attr("name"); if(!iptName||iptName.length==0){ nameSame=true; layer.tips('name存在重复或为空，请重新编辑', $(ipt), { tips: [1,"#F26C4F"] }); } }); if(nameSame===true){ return false; } var template=$('#source').val(); var newModuleName=$('#newModuleName').val(); console.log(newModuleName); var subscribe=$('#subscribe').val(); var params = { "name":newModuleName, "langCode":"com.zk.cusservice", "type":"周报", "subscribe":subscribe, "template":template }; var url = '/moduleTemplate/save'; $.ajaxSend(url,params).done(function(data) { if (data.code==='00000000') { //console.log(data); layer.msg(data.msg); //$modal.success(data.msg) } });
}2.js(2)
(function(){ var LPB = window.LPB = window.LPB || {plugins:[], genSource:function(){ var $temptxt = $("<div>").html($("#build").html()); $($temptxt).find(".component").attr({"title": null, "data-original-title":null, "data-type": null, "data-content": null, "rel": null, "trigger":null, "style": null}); $($temptxt).find(".valtype").attr("data-valtype", null).removeClass("valtype"); $($temptxt).find(".component").removeClass("component"); $($temptxt).find("form").attr({"id": null, "style": null}); $("#source").val($temptxt.html().replace(/\n/g,"\n")); } }; LPB.plugins['form_name'] = function (active_component,leipiplugins) { var plugins = 'form_name',popover = $(".popover"); console.log($(leipiplugins)); $(popover).find("#orgvalue").val($(leipiplugins).val()); $(popover).delegate(".btn-danger", "click", function(e){ e.preventDefault(); active_component.popover("hide"); }); $(popover).delegate(".btn-info", "click", function(e){ e.preventDefault(); var inputs = $(popover).find("input"); console.log(888); $.each(inputs, function(i,e){ var attr_name = $(e).attr("id"); var attr_val = $("#"+attr_name).val(); if(attr_name == 'orgvalue') { $(leipiplugins).attr("value", attr_val); active_component.find(".leipiplugins-orgvalue").text(attr_val); } active_component.popover("hide"); LPB.genSource(); }); }); }})();$(document).ready(function(){ $("#navtab").delegate("#sourcetab", "click", function(e){ LPB.genSource(); }); $("form").delegate(".component", "mousedown", function(md){ $(".popover").remove(); console.log(md); md.preventDefault(); var tops = []; var mouseX = md.pageX; var mouseY = md.pageY; var $temp; var timeout; var $this = $(this); var delays = { main: 0, form: 120 }; var type; if($this.parent().parent().parent().parent().attr("id") === "components"){ type = "main"; } else { type = "form"; } var delayed = setTimeout(function(){ if(type === "main"){ $temp = $("<form class='form-horizontal span6' id='temp'></form>").append($this.clone()); } else { if($this.attr("id") !== "legend"){ $temp = $("<form class='form-horizontal span6' id='temp'></form>").append($this); } } $("body").append($temp); $temp.css({"position" : "absolute", "top" : mouseY - ($temp.height()/2) + "px", "left" : mouseX - ($temp.width()/2) + "px", "opacity" : "0.9"}).show() var half_box_height = ($temp.height()/2); var half_box_width = ($temp.width()/2); var $target = $("#target"); var tar_pos = $target.position(); var $target_component = $("#target .component"); $(document).delegate("body", "mousemove", function(mm){ var mm_mouseX = mm.pageX; var mm_mouseY = mm.pageY; $temp.css({"top" : mm_mouseY - half_box_height + "px", "left" : mm_mouseX - half_box_width + "px"}); if ( mm_mouseX > tar_pos.left && mm_mouseX < tar_pos.left + $target.width() + $temp.width()/2 && mm_mouseY > tar_pos.top && mm_mouseY < tar_pos.top + $target.height() + $temp.height()/2 ){ $("#target").css("background-color", "#fafdff"); $target_component.css({"border-top" : "1px solid white", "border-bottom" : "none"}); tops = $.grep($target_component, function(e){ return ($(e).position().top - mm_mouseY + half_box_height > 0 && $(e).attr("id") !== "legend"); }); if (tops.length > 0){ $(tops[0]).css("border-top", "1px solid #22aaff"); } else{ if($target_component.length > 0){ $($target_component[$target_component.length - 1]).css("border-bottom", "1px solid #22aaff"); } } } else{ $("#target").css("background-color", "#fff"); $target_component.css({"border-top" : "1px solid white", "border-bottom" : "none"}); $target.css("background-color", "#fff"); } }); $("body").delegate("#temp", "mouseup", function(mu){ mu.preventDefault(); var mu_mouseX = mu.pageX; var mu_mouseY = mu.pageY; var tar_pos = $target.position(); $("#target .component").css({"border-top" : "1px solid white", "border-bottom" : "none"}); if (mu_mouseX + half_box_width > tar_pos.left && mu_mouseX - half_box_width < tar_pos.left + $target.width() && mu_mouseY + half_box_height > tar_pos.top && mu_mouseY - half_box_height < tar_pos.top + $target.height() ){ $temp.attr("style", null); if(tops.length > 0){ $($temp.html()).insertBefore(tops[0]); } else { $("#target fieldset").append($temp.append("\n\n\ \ \ \ ").html()); } } else { $("#target .component").css({"border-top" : "1px solid white", "border-bottom" : "none"}); tops = []; } $target.css("background-color", "#fff"); $(document).undelegate("body", "mousemove"); $("body").undelegate("#temp","mouseup"); $("#target .component").popover({trigger: "manual"}); $temp.remove(); LPB.genSource(); }); }, delays[type]); $(document).mouseup(function () { clearInterval(delayed); return false; }); $(this).mouseout(function () { clearInterval(delayed); return false; }); }); $("#target .component").popover({trigger: "manual"}); $("#target").delegate(".component", "click", function(e){ e.preventDefault(); var active_component = $(this); active_component.popover("show"); var leipiplugins = active_component.find(".leipiplugins"),plugins =$(leipiplugins).attr("leipiplugins"); if(typeof(LPB.plugins[plugins]) =='function') { try{ LPB.plugins[plugins](active_component,leipiplugins); }catch ( e ) { alert('控件异常！'); } }else { alert("控件有误或不存在"); } });});
3.css
/** * Main navigation */.bs-docs-nav { text-shadow: 0 -1px 0 rgba(0,0,0,.15); /* */ border-color: #463265; box-shadow: 0 1px 0 rgba(255,255,255,.1);}.bs-docs-nav .navbar-collapse { border-color: #463265;}.bs-docs-nav .navbar-brand { color: #fff;}.bs-docs-nav .navbar-nav > li > a { color: #cdbfe3;}.bs-docs-nav .navbar-nav > li > a:hover { color: #fff;}.bs-docs-nav .navbar-nav > .active > a,.bs-docs-nav .navbar-nav > .active > a:hover { color: #fff; background:none;}.bs-docs-nav .navbar-toggle { border-color: #563d7c;}.bs-docs-nav .navbar-toggle:hover { background-color: #463265; border-color: #463265;}
/* Page headers */.bs-header { padding: 40px 15px 20px; /* side padding builds on .container 15px, so 30px */ margin:20px 0; font-size: 16px; text-align: left; text-shadow: 0 1px 0 rgba(0,0,0,.15); background-color: #000; color: #fff;;background-repeat:repeat-x; background-image:-webkit-linear-gradient(45deg, #020031, #563d7c); background-image:-moz-linear-gradient(45deg, #020031, #563d7c); background-image:linear-gradient(45deg, #020031, #563d7c)
}.bs-header p { font-weight: 300; line-height: 1.5;}/* * Footer * * Separated section of content at the bottom of all pages, save the homepage. */
.bs-footer { padding-top: 40px; padding-bottom: 30px; margin-top: 40px; color: #777; text-align: left; border-top: 1px solid #e5e5e5; background-color:#f5f5f5}.footer-links { margin: 10px 0; padding-left: 0;}.footer-links li { display: inline; padding: 0 2px;}.footer-links li:first-child { padding-left: 0;}
转载于:https://www.cnblogs.com/cx709452428/p/6862468.html
动态生成模板（模板生成器）相关推荐
- Java动态生成excel模板文件(包含列下拉)
1.添加依赖 <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> <dependency><gr ...
- JAVA动态生成excel模板；列自定义下拉框赋值
哈喽,2023大家开工大吉啊!财源滚滚! 业务需求:需要生成excel模板,且对部分列设置下拉框,进行动态赋值,效果如下: 拿上图举例:针对省这一列,不是填写,而是选择数据,也就是说我们生成excel ...
- GridView中动态生成ItemTemplate模板列
我们知道DataGrid,DataList等控件都有Template列,我们可以通过动态的邦定模版列来实现,复杂逻辑的邦定.由于Page继承TemplateControl,所以在Page对象里面就可以 ...
- 9.动态生成实体类，根据XML模板使用Emit生成动态类绑定到DataGrid
在实际项目中,我们可能会遇到用户自定义XML模板字段,根据这个模板上的字段来显示相应的字段的值到DataGrid.在这种情况下,需要使用 XmlReader解析获取这个用户自定义的XML模板上有哪些字 ...
- Freemarker - 根据模板动态生成word文档
文章目录 Freemarker 根据模板动态生成word文档 Freemarker 介绍: Freemarker 使用: freemarker加载模板目录的方法 参考资料 Freemarker 根据模 ...
- poi根据模板导出word（包含图片、动态生成表格、合并单元格）(亲测有效)
准备工作: 1.需要的jar(jar包在资源处已上传,可下载) 2.创建docx模板(doc不可以) 第一步:准备好jar(这里面的 ooxml-schemas-1.1.jar 大家可以尝试用poi- ...
- Java读取word模板，并动态生成word
Java读取word模板,并动态生成word 最近有个需求是将数据库里存入的用户个人信息生成一个word然后供用户下载,第一时间就就想到了poi来做,所以记录一下免得自己忘了,忘了也可以回来看看
- POI利用word模板动态生成word报表以及动态生成word表格
目录 核心依赖 动态表格 测试类 工具类 动态数据 测试类 工具类 核心依赖 <dependency><groupId>org.apache.poi</groupId&g ...
- freemarker实现word文档模板动态生成
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第29天,点击查看活动详情 1.写在前面 很多时候,我们可能需要根据一个word模板,动态生成,我们所需要得一个word文档. 那这 ...
- java基于word模板动态生成word及转pdf实践
在项目中很容易会遇到需要动态生成pdf的应用场景,其实现方式也比较多 由于项目的关系,对于这种组件性的开发方式我想的是怎么方便怎么来,怎么快就怎么来 在咨询了之前做政务系统的同学后,他们都一致推荐我使 ...
最新文章
- 考csp所需算法_CSP vs RxJS：您所不知道的。
- 科技部5个6G重点项目
- AndEngine引擎学习之绘制直线
- 如何获取cURL以不显示进度栏？
- Python 技巧篇-如何避免python报错导致强制关闭窗口
- c include 多层目录_Rsync 秒杀一切备份工具，你能手动屏蔽某些目录吗？
- SQL Server 中截取字符串常用的函数
- 移动标准差以及移动平均值(movstd、movmean)
- Django构建简介
- 根深才能叶茂：基础软件突破亟待产业界携手创新完善生态
- Nginx 配置学习
- oracle_linux安装oracle_12.1.0
- 数据库设计是否应该允许空值的存在
- HP-UX 11i v2安装使用python 2.5.2
- 【三维路径规划】基于matlab粒子群算法无人机山地三维路径规划【含Matlab源码 1405期】
- 学会这些VRay渲染器HDRI照明技巧，轻松搞定3ds Max
- 立体井字棋NOIP17提高模拟训练5
- Windows游戏加速外挂-变速齿轮 学习笔记-【第一篇】
- android会员管理,基于Android平台的会员管理系统设计与实现
- iPhone 计算机 桌面,2分钟学会Windows仿苹果任务栏，你的电脑桌面也可如此炫酷！...