Form表单

自定义表单

<from action="" method="'><!---      这里可以用表单组件快速生成表单元素哦          ---></form>

生成后我们必须引入表单事件才能使有的表单组件正确显示(一般用的是Form.api.bindevent("form[role=form]");进行组件初始化) 

引入表单js模块

//直接引入
require(['form'], function(Form){});

//当我们在新建了项目在/public/assets/js/控制器名.js中引入:(模块化加载的依赖引入) 
define(['jquery', 'bootstrap', 'backend', 'form'], function ($, undefined, Backend, Form) {

});

上面说我们一般用的是Form.api.bindevent("form[role=form]");进行组件初始化 它包含了几乎所有的表单组件事件(即调用它就可以生成组件里的所有组件)

如果我们只生成个别表单不想绑定表单总事件则我们可以用下列的事件:

文件上传        Form.events.plupload($("form"));    渲染并绑定form中的上传组件
动态下拉列表     Form.events.selectpage($("form"));    渲染并绑定form中的Selectpage组件
表单验证        Form.events.validator($("form"));    渲染并绑定form中的表单验证
城市选择        Form.events.citypicker($("form"));    渲染并绑定form中的城市选择组件
日期时间        Form.events.datetimepicker($("form"));    渲染并绑定form中的日期时间组件
下拉列表        Form.events.selectpicker($("form"));    渲染并绑定form中的Selectpicker组件
附件选择        Form.events.faselect($("form"));    渲染并绑定form中的选择附件组件
键值配置        Form.events.fieldlist($("form"));    渲染并绑定form中的选择键值配置组件

 

除了上面的表单组件可以快速生成表单元素,还有其他快速生成的方式

如:图片上传:

<div class="form-group">
    <label for="c-avatar" class="control-label col-xs-12 col-sm-2">头像:</label>
    <div class="col-xs-12 col-sm-8">
        <div class="input-group">
            <input >
            <div class="input-group-addon no-border no-padding">
                <span><button type="button" ></i> 上传</button></span>
                <span><button type="button" ></i> 选择</button></span>
            </div>
            <span class="msg-box n-right" for="c-avatar"></span>
        </div>
        <ul class="row list-inline plupload-preview" ></ul>
    </div>
</div>
//无需表单事件?
View Code

相关文章: