开发文档
阅读本文档您可以快速学会使用表单设计器和开发扩展控件!
阅读本文档您可以快速学会使用表单设计器和开发扩展控件!
Formbuild Leipi Org
是拖拽式表单设计器,无需学习复杂的排版技术,更快捷的制作表单,具有【精巧、方便、实用】等优点。
基础功能使用纯 Javascript + Jquery 编写,兼容:IE7++、Chrome、Firefox 等主流浏览器,IE6请看这里
请先下载
解压后,参考index.html
示例
//使用低版本JQuery更好兼容低版本IE <script charset="utf-8" src="/Public/js/jquery-1.7.2.min.js"></script> <script charset="utf-8" src="/Public/js/formbuild/bootstrap/js/bootstrap.min.js"></script> //formbuild核心文件,开发者一般不修改 <script charset="utf-8" src="/Public/js/formbuild/leipi.form.build.core.js"></script> //控件扩展文件,开发者可以自行设计添加 <script charset="utf-8" src="/Public/js/formbuild/leipi.form.build.plugins.js"></script>
控件设置界面Html
<!-- 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='orgvalue' placeholder='默认值'>
<hr/>
<button class='btn btn-info' type='button'>确定</button><button class='btn btn-danger' type='button'>取消</button>
</div>
</form>"
>
<!-- Text 拖动的 DIV -->
<label class="control-label leipiplugins-orgname">文本框</label>
<div class="controls">
<input name="leipiNewField" type="text" placeholder="默认值" title="文本框" value="" class="leipiplugins" leipiplugins="text"/>
</div>
</div>
<!-- Text end -->
扩展文件leipi.form.build.plugins.js
/* 文本框控件 text
acc 是 class="component" 的DIV
e 是 class="leipiplugins" 的控件
*/
LPB.plugins['text'] = function (active_component,leipiplugins) {
var plugins = 'text',popover = $(".popover");
//右弹form 初始化值
$(popover).find("#orgname").val($(leipiplugins).attr("title"));
$(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 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();//重置源代码
});
});
}