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;
60px;
padding-top: 5px;
text-align: right;
}
.form-horizontal .controls {
margin-left: 90px;
}
.container{
100%;
}
#newModule{
720px;
}
/*滑动按钮*/
.switch{
60px;
}
.btn_fath{
position: relative;
border-radius: 20px;
}
.btn1{
float: left;
}
.btn2{
float: right;
}
.btnSwitch{
height: 24px;
30px;
border:none;
color: #fff;
line-height: 24px;
font-size: 12px;
text-align: center;
z-index: 1;
}
.move{
z-index: 100;
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{
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="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="40px">订阅</span>
<div class="switch">
<div class="btn_fath clearfix off" onclick="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="保存模板" onclick="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-Zd]{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-Zd]{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(" ");
$(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-Zd]{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(" ");
$(leipiplugins).html("");
$.each(options, function(i,e){
$(leipiplugins).append(" ");
$(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(" ");
$(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-Zd]{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(" ");
var html = "<!-- Multiple Checkboxes --> ";
$.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+'"> <input type="checkbox" name="'+vName+'" title="'+vTitle+'" value="'+e+'" orginline="'+orginline+'" class="leipiplugins" leipiplugins="checkbox" >'+e+' </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(" ");
$(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-Zd]{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(" ");
var html = "<!-- Multiple Checkboxes --> ";
$.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+'"> <input type="radio" name="'+vName+'" title="'+vTitle+'" value="'+e+'" orginline="'+orginline+'" class="leipiplugins" leipiplugins="radio" >'+e+' </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-Zd]{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(/
/g,"
"));
}
};
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("
").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;
}