<div id="frange_page" class="page out" data-title="滑块">
	<div class="page-content" id="frange_content">
		<div id="frange-header"></div>
		<div id="frange-form"></div>
		<div id="frange1"></div>
		<div id="frange-fbutton"></div>
	</div>
</div>
<script>
require(["NavHeader", "Form", "FRange", "FButton", "mUtil"], function(NavHeader, Form, FRange, FButton, mUtil) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";
	if(!hasClsPicker) {
		new NavHeader({
			el: "frange-header",
			option: {
				title:"表单-滑块", 
				smallTitle:"frange"
			}
		}).render();
		new FButton({
			el: "frange-fbutton",
			container: "#frange_page",
			option: {
				form : "frange-form",
				btns : [
					{
						text : "重置",
						action : "reset"
					},
					{
						text : "提交",
						action : "submit",
						callback : function(billid) {
							console.log(billid);
						},
						remindMsg : "操作成功"
					}
				],
				fixed : true
			}
		}).render();
	}
	new Form({
		el: "frange-form",
		option: {
			submit : {
				action : "/mobilemode/mobile/demo/plugin/Form/formAction.jsp",//提交地址
				validate : function(){
					//表单提交前验证脚本
				}
			}
		}
	}).render();

	new FRange({
		el: "frange1",
		option: {
			form : "frange-form",//所属表单id
			field : {
				label : "可编辑",
				name : "range1",
				value: "10"
			},
			min: -50,
			max: 50
		}
	}).render().then(function(){
		if (!hasClsPicker) return;

		_u.vetically("#frange1");

		clsPicker.golalSetting({
			container: "#frange1",
			type: "Frange"
		});

		new clsPicker({
			selector: ".wev-range-wrap input[type=range]",
			text: "..wev-range-wrap input[type=range]",
			lineYSkew: 80,
			angle: 80,
			skew: [1.1, 0],
			position: "bottom left"
		});
	});

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