<div id="fcheckbok_page" class="page out" data-title="单多选">
	<div class="page-content" id="fcheckbok_content">
		<div id="fcheckbok-header"></div>
		<div id="fcheckbok-form"></div>
		<div id="fcheckbok1"></div>
		<div id="fcheckbok2"></div>
		<div id="fcheckbok3"></div>
		<div id="fcheckbok4"></div>
		<div id="fcheckbok5"></div>
		<div id="fcheckbok-fbutton"></div>
	</div>
</div>
<script>
require(["NavHeader", "Form", "FCheckbox","FSelect", "FButton", "mUtil"], function(NavHeader, Form, FCheckbox,FSelect, FButton, mUtil) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

	var itemsConfig = [{ name: 'java', value: 1 }, { name: 'javascript', value: 2 }, { name: 'jquery', value: 3 }, { name: 'zepto', value: 4 }]; // 选择框的配置项
	
	if (!hasClsPicker) {
		new NavHeader({
			el: "fcheckbok-header",
			option: {
				title:"表单-单多选", 
				smallTitle:"fcheckbok"
			}
		}).render();

		new Form({
			el: "fcheckbok-form",
			option: {
				submit : {
					action : "/mobilemode/mobile/demo/plugin/Form/formAction.jsp",//提交地址
					validate : function(){
						//表单提交前验证脚本
					}
				}
			}
		}).render();

		new FCheckbox({
			el: "fcheckbok1",
			option: {
				form : "fcheckbok-form",//所属表单id
				field : {
					label : "单选",
					name : "c1"
				},
				items:itemsConfig
			}
		}).render();
		
		new FCheckbox({
			el: "fcheckbok2",
			option: {
				form : "fcheckbok-form",//所属表单id
				field : {
					label : "默认多选只读", //必填
					name : "c2",//必填  字段NAME
					value : '1,3'
				},
				items:itemsConfig,
				readonly:true
			}
		}).render();
		
		new FCheckbox({
			el: "fcheckbok3",
			option: {
				form : "fcheckbok-form",//所属表单id
				field : {
					label : "必填",
					name : "c3"
				},
				items:itemsConfig,
				required:true
			}
		}).render();
	}

	new FCheckbox({
		el: "fcheckbok4",
		option: {
			form : "fcheckbok-form",//所属表单id
			field : {
				label : "多选",
				name : "c4",
				value: 2
			},
			items:itemsConfig,
			multiselect : true
		}
	}).render().then(function() {
		if (!hasClsPicker) return;

		clsPicker.golalSetting({
			container: "#fcheckbok4 .wev-comp-FCheckbox",
			type: "FCheckbox"
		});

		new clsPicker({
			selector: ".wev-field.vertical",
			text: ".wev-field.vertical",
			lineYSkew: 20,
			height: 100
		});

		new clsPicker({
			selector: ".wev-checkbox-horizontal-container .checked",
			text: ".checked",
			lineYSkew: 50,
			height: 100
		});
		new clsPicker({
			selector: ".wev-checkbox-horizontal-container li",
			text: " ",
			lineYSkew: 50,
			height: 100
		});
	});
	
	new FCheckbox({
		el: "fcheckbok5",
		option: {
			form : "fcheckbok-form",//所属表单id
			field : {
				label : "垂直显示-多选",
				name : "c5",
				value: 2
			},
			items:itemsConfig,
			multiselect : true,
			vertical:true
		}
	}).render().then(function() {
		if (!hasClsPicker) return;

		_u.vetically("#fcheckbok5");

		clsPicker.golalSetting({
			container: "#fcheckbok5 .wev-comp-FCheckbox",
			type: "FCheckbox"
		});

		new clsPicker({
			selector: "#fcheckbok5 .wev-field.vertical>div:nth-child(1)",
			text: " ",
			lineYSkew: 20,
			skew: [20, ""],
			position: "top right"
		});
		new clsPicker({
			selector: ".wev-checkbox-vertical-container ul li",
			text: " ",
			lineYSkew: 20,
			skew: [4.5, ""],
			position: "top right"
		});
		new clsPicker({
			selector: ".wev-checkbox-vertical-container ul li.checked",
			text: ".checked",
			lineYSkew: 20,
			skew: [2.5, ""],
			position: "top right"
		});
		new clsPicker({
			selector: "#fcheckbok5 .wev-field.vertical>div:nth-child(2)",
			text: " ",
			lineYSkew: 20,
		});
		
	});
	
	if (!hasClsPicker) {
		new FButton({
			el: "fcheckbok-fbutton",
			container: "#fcheckbok_page",
			option: {
				form : "fcheckbok-form",
				btns : [
					{
						text : "重置",
						action : "reset"
					},
					{
						text : "提交",
						action : "submit",
						callback : function(billid) {
							console.log(billid);
						},
						remindMsg : "操作成功"
					}
				],
				fixed : true
			}
		}).render();
	}

	mUtil.trigger('load');//页面渲染完成回调
});
</script>