Formbuild Leipi Org

是拖拽式表单设计器，无需学习复杂的排版技术，更快捷的制作表单，具有【精巧、方便、实用】等优点。

基础功能使用纯 Javascript + Jquery 编写，兼容：IE7++、Chrome、Firefox 等主流浏览器，IE6请看这里

请先下载

1. 下载表单设计器

安装

//使用低版本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();//重置源代码
      });

  });
}