demo.html 5.43 KB
<div id="finputtext" class="page out" data-title="单行文本">
	<div class="page-content" id="finputtext_content">
		<div id="finputtext-header"></div>
		<div id="finputtext-form"></div>
		<div id="finputtext-text"></div>
		<div id="finputtext-date"></div>
		<div id="finputtext-time"></div>
		<div id="finputtext-datetime"></div>
		<div id="finputtext-password"></div>
		<div id="finputtext-tel"></div>
		<div id="finputtext-int"></div>
		<div id="finputtext-float"></div>
		<div id="finputtext-sum"></div>
		<div id="finputtext-fbutton"></div>
	</div>
</div>
<script>
require(["NavHeader", "Form", "FInputText", "FButton", "mUtil"], function(NavHeader, Form, FInputText, FButton, mUtil) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

	if (!hasClsPicker) {
		new NavHeader({
			el: "finputtext-header",
			option: {
				title:"表单-单行文本", 
				smallTitle:"finputtext"
			}
		}).render();
		
		new Form({
			el: "finputtext-form",
			option: {
				submit : {
					action : "/mobilemode/mobile/demo/plugin/Form/formAction.jsp",//提交地址
					validate : function(){
						//表单提交前验证脚本
					}
				}
			}
		}).render();
		new FInputText({
			el: "finputtext-text",
			option: {
				form : "finputtext-form",//所属表单id
				field : {
					label : "文本",//显示名
					name : "f1",//字段名,后台接收参数名,如果提交表单数据,请对应数据库字段名
					type : "text"//字段类型//text.文本,date.日期,time.时间,datetime.日期时间,password.密码,tel.电话号码,int.整数,float.浮点数
				},
				placeholder : "请输入文本...",
				required : true
			}
		}).render();
		
		new FInputText({
			el: "finputtext-date",
			option: {
				form : "finputtext-form",
				field : {
					label : "日期",//显示名
					name : "f2",//字段名
					type : "date",//字段类型
				},
				yearOffest : {//年份偏移
					prev: 1,
					next: 1
				}
			}
		}).render();
		
		new FInputText({
			el: "finputtext-time",
			option: {
				form : "finputtext-form",
				field : {
					label : "时间",//显示名
					name : "f3",//字段名
					type : "time",//字段类型
				}
			}
		}).render();
		
		new FInputText({
			el: "finputtext-datetime",
			option: {
				form : "finputtext-form",
				field : {
					label : "日期时间",//显示名
					name : "f4",//字段名
					type : "datetime",//字段类型
				},
				yearOffest : {//年份偏移
					prev: 5,
					next: 5
				}
			}
		}).render();
		
		new FInputText({
			el: "finputtext-password",
			option: {
				form : "finputtext-form",
				field : {
					label : "密码",//显示名
					name : "f5",//字段名
					type : "password",//字段类型
				}
			}
		}).render();
	}
	new FInputText({
		el: "finputtext-tel",
		option: {
			form : "finputtext-form",
			field : {
				label : "电话",//显示名
				name : "f6",//字段名
				type : "tel",//字段类型
			}
		}
	}).render().then(function() {
		if (!hasClsPicker) return;

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

		new clsPicker({
			selector: ".wev-field",
			text: ".wev-field",
			lineYSkew: 80,
			skew: [1.2, ""],
			position: "bottom left"
		});
		new clsPicker({
			selector: ".wev-field>div:nth-child(1)",
			text: " ",
			lineYSkew: 20
		});
		new clsPicker({
			selector: ".wev-field>div:nth-child(2)",
			text: " ",
			lineYSkew: 20
		});
		new clsPicker({
			selector: ".wev-field>div:nth-child(2) input",
			text: " ",
			skew: [1.5, ""],
			lineYSkew: 50
		});
	});
	
	new FInputText({
		el: "finputtext-int",
		option: {
			form : "finputtext-form",
			field : {
				label : "整数",//显示名
				name : "f7",//字段名
				type : "int",//字段类型
				value: 20//默认值
			},
			assist: {
				active: true,
				min: 0,
				max:100
			}
		}
	}).render().then(function() {
		if (!hasClsPicker) return;

		_u.vetically("#finputtext-int");

		clsPicker.golalSetting({
			container: "#finputtext-int .wev-comp-FInputText",
			type: "FInputText"
		});

		new clsPicker({
			selector: ".wev-numbox-minus.wev-btn",
			text: ".wev-numbox-minus",
			lineYSkew: 20
		});
		new clsPicker({
			selector: ".wev-numbox input",
			text: " ",
			lineYSkew: 50,
			position: "bottom left"
		});
		new clsPicker({
			selector: ".wev-numbox-add.wev-btn",
			text: ".wev-numbox-add",
			lineYSkew: 80
		});
	});
	
	if(!hasClsPicker) {
		new FInputText({
			el: "finputtext-float",
			option: {
				form : "finputtext-form",
				field : {
					label : "浮点数",//显示名
					name : "f8",//字段名
					type : "float",//字段类型
				},
				assist: {
					active: true,
					min: 0,
					max:100,
					precision: 3
				}
			}
		}).render();
		
		new FInputText({
			el: "finputtext-sum",
			container: "#finputtext",
			option: {
				form : "finputtext-form",
				field : {
					label : "求和",//显示名
					name : "f9",//字段名
					type : "float",//字段类型
					expr: "{f7}+{f8}"//求值表达式
				},
				readonly:true
			}
		}).render();
		
		
		new FButton({
			el: "finputtext-fbutton",
			container: "#finputtext",
			option: {
				form : "finputtext-form",
				btns : [
					{
						text : "重置",
						action : "reset"
					},
					{
						text : "提交",
						action : "submit",
						callback : function(billid) {
							console.log(billid);
						},
						remindMsg : "操作成功"
					}
				],
				fixed : true
			}
		}).render();
	}

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