<div id="dynamic-form" class="page out" data-title="动态表单插件">
	<div class="page-content" id="dynamic-form_content">
		<div class="dynamic-form-items">
			<div id="dynamic-form-header"></div>
            <div id="dynamic-form-wrapper"></div>
            <div id="dynamic-form-fbutton"></div>
		</div>
	</div>
</div>
<script>
require(["NavHeader", "DynamicForm", "FButton"], function(NavHeader, DynamicForm, FButton) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";
	if(!hasClsPicker) {
		new NavHeader({
			el: "dynamic-form-header",
			option: {
				title:"动态表单插件",
				smallTitle:"dynamic-form"
			}
		}).render();
	}
    var itemsConfig = [
        { name: 'java', value: 1 },
        { name: 'javascript', value: 2 },
        { name: 'jquery', value: 3 },
        { name: 'zepto', value: 4 }
	]; // 选择框的配置项
    var datas = [
        {
            title: "1.文本字段",
            group: true,
            childs: [
                {
                    group: false,
                    type: "FInputText",
                    option: {
                        form : "",//所属表单id
                        field : {
                            label : "单行文本",
                            name : "a1",
                            type : "text"//字段类型//text.文本，date.日期，time.时间，datetime.日期时间，password.密码，tel.电话号码，int.整数，float.浮点数
                        },
                        placeholder : "请输入文本...",
                        required : true
                    }
                },
                {
                    group: false,
                    type: "FTextarea",
                    option: {
                        form : "",//所属表单id
                        field : {
                            label : "多行文本",
                            name : "a2",
                            type : "text"//字段类型//text.文本，date.日期，time.时间，datetime.日期时间，password.密码，tel.电话号码，int.整数，float.浮点数
                        },
                        placeholder : "请输入多文本..."
                    }
                }
            ]
        },
        {
            title: "2.选择框字段",
            group: true,
            childs: [
                {
                    group: false,
                    type: "FSelect",
                    option: {
                        form: "",
                        field: {
                            label: "选择项",
                            name: "b1"
                        },
                        items: itemsConfig,
                        required: true
                    }
                }
            ]
        },
        {
            title: "3.单多选字段",
            group: true,
            childs: [
                {
                    type: "FCheckbox",
                    option: {
                        form : "",//所属表单id
                        field : {
                            label : "单选",
                            name : "c1",
                            value: "2"
                        },
                        items: itemsConfig
                    }
                },
                {
                    type: "FCheckbox",
                    option: {
                        form : "",//所属表单id
                        field : {
                            label : "多选",
                            name : "c2",
                            value: "1,3"
                        },
                        items: itemsConfig,
                        multiselect: true,
                        vertical: true,
                        required: true
                    }
                }
            ]
        },
        {
            title: "4.拍照字段",
            group: true,
            childs: [
                {
                    type: "FPhoto",
                    option: {
                        form: "",
                        field : {
                            label: "选择照片",
                            name : "photo"		//字段名
                        },
                        limit : 3
                    }
                }
            ]
        }
    ];
    new DynamicForm({
        el: "dynamic-form-wrapper",
        container: "#dynamic-form",
        option: {
            datas: datas,
            submit: {
                action: "/mobilemode/actiontemplet/dynamicFormSubmitTempletAction.jsp"
            }
        }
    }).render();

    new FButton({
        el: "dynamic-form-fbutton",
        container: "#dynamic-form",
        option: {
            form : "dynamic-form-wrapper",
            btns : [
                {
                    text : "重置",
                    action : "reset"
                },
                {
                    text : "提交",
                    action : "submit",
                    callback : function(args) {

                    },
                    remindMsg : "操作成功"
                }
            ],
            fixed : true
        }
    }).render();
});
</script>