<div id="form" class="page out" data-title="表单插件">
	<div class="page-content" id="form_content">
		<div class="form-items">
			<div id="form-header"></div>
			<div id="form-main"></div>
			<div id="form-finputtext-name"></div>
			<div id="form-finputtext-age"></div>
			<div id="form-finputtext-date"></div>
			<div id="form-finputtext-email"></div>
			<div id="form-finputtext-tel"></div>
			<div id="form-fbutton"></div>
		</div>
	</div>
</div>
<script>
require(["NavHeader", "Form", "FInputText", "FButton", "ColumnBreak"], function(NavHeader, Form, FInputText, FButton, ColumnBreak) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";
	if(!hasClsPicker) {
		new NavHeader({
			el: "form-header",
			option: {
				title:"表单插件", 
				smallTitle:"form"
			}
		}).render();
		new FButton({
			el: "form-fbutton",
			container: "#form",
			option: {
				form : "form-main",
				btns : [
					{
						text : "重置",
						action : "reset"
					},
					{
						text : "提交",
						action : "submit",
						callback : function(args) {
							
						},
						remindMsg : "操作成功"
					}
				],
				fixed : true
			}
		}).render();
	}
	new Form({
		el: "form-main",
		option: {
			table : {//表单信息，自定义提交时可缺省
				datasource : "",//表单数据源
				name : "",		//表单名
				key : ""		//表单主键
			},
			submit : {
				action : "/mobilemode/mobile/demo/plugin/Form/formAction.jsp",//save 表单保存、createWf提交流程、自定义提交地址
				validate : function(){
					//表单提交前验证脚本
				}
			},
			relate : {//模块流程信息，自定义提交时可缺省
				modeid : -1,	//模块id
				wfid : -1,		//流程id
				wftitle : ""	//流程标题
			}
			
		}
	}).render();

	new FInputText({
		el: "form-finputtext-name",
		option: {
			form : "form-main",
			field : {
				label : "姓名",//显示名
				name : "name",//字段名
				type : "text"//字段类型//text.文本，date.日期，time.时间，datetime.日期时间，password.密码，tel.电话号码，int.整数，float.浮点数
			},
			placeholder : "请输入...",
			required : true,
			onload:function(){
				
			}
		}
	}).render().then(function(){
		if (!hasClsPicker) return;
		_u.vetically(".form-items");
		clsPicker.golalSetting({
			container: ".form-items",
			type: "Form"
		});

		new clsPicker({
			selector: ".wev-field",
			text: ".wev-field",
			lineYSkew: -80,
			skew: [4,0],
			position: "bottom right"
		});
		new clsPicker({
			selector: ".wev-field>div:nth-child(1)",
			text: ".wev-field>div:nth-child(1)",
			lineYSkew: -30,
			skew: [6,2],
			position: "bottom right"
		});
		new clsPicker({
			selector: ".wev-field>div:nth-child(2)",
			text: ".wev-field>div:nth-child(2)",
			lineYSkew: -100,
			skew: [8,2],
			position: "bottom right"
		});
	});
	
	new FInputText({
		el: "form-finputtext-age",
		option: {
			form : "form-main",
			field : {
				label : "年龄",//显示名
				name : "age",//字段名
				type : "int",//字段类型
				value: 20
			},
			assist: {
				active: true
			},
			placeholder : "请填写年龄..."
		}
	}).render();
	
	new FInputText({
		el: "form-finputtext-date",
		option: {
			form : "form-main",
			field : {
				label : "预约日期",//显示名
				name : "date",//字段名
				type : "date",//字段类型
			},
			yearOffest : {//年份偏移
				prev: 100,
				next: 1
			},
			placeholder : "请填写预约日期..."
		}
	}).render();
	
	new FInputText({
		el: "form-finputtext-email",
		option: {
			form : "form-main",
			field : {
				label : "邮箱",//显示名
				name : "email",//字段名
				type : "text",//字段类型
			},
			placeholder : "请填写邮箱..."
		}
	}).render();
	
	new FInputText({
		el: "form-finputtext-tel",
		option: {
			form : "form-main",
			field : {
				label : "联系方式",//显示名
				name : "tel",//字段名
				type : "tel",//字段类型
			},
			placeholder : "请输入联系方式..."
		}
	}).render();
});
</script>