demo.html
2.61 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<div id="fbutton" class="page out" data-title="表单按钮">
	<div class="page-content" id="fbutton_content">
		<div id="fbutton-header"></div>
		<div id="fbutton-form"></div>
		<div id="fbutton-text"></div>
		<div id="fbutton-fbutton"></div>
	</div>
</div>
<script>
require(["NavHeader", "Form", "FInputText", "FButton"], function(NavHeader, Form, FInputText, FButton) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";
	if(!hasClsPicker) {
		new NavHeader({
			el: "fbutton-header",
			option: {
				title:"表单-按钮", 
				smallTitle:"fbutton"
			}
		}).render();
		
		new Form({
			el: "fbutton-form",
			option: {
				submit : {
					action : "/mobilemode/mobile/demo/plugin/Form/formAction.jsp",//提交地址
					validate : function(){
						//表单提交前验证脚本
					}
				}
			}
		}).render();
		new FInputText({
			el: "fbutton-text",
			option: {
				form : "fbutton-form",
				field : {
					label : "表单字段",//显示名
					name : "f1",//字段名,后台接收参数名,如果提交表单数据,请对应数据库字段名
					type : "text"//字段类型//text.文本,date.日期,time.时间,datetime.日期时间,password.密码,tel.电话号码,int.整数,float.浮点数
				}
			}
		}).render();
	}
	new FButton({
		el: "fbutton-fbutton",
		container: "#fbutton",
		option: {
			form : "fbutton-form",
			btns : [
				{
					text : "重置",
					action : "reset"
				},
				{
					text : "提交",
					action : "submit",//submitAndBack 提交并返回
					callback : function(billid) {
						console.log(billid);
					},
					remindMsg : "操作成功"
				},
				{
					text : "手动输入",
					action : "custom",
					click : function() {
						Mobile_NS.formSubmit("fbutton-form", function(billid){
							Mobile_NS.Alert("成功->"+billid);
						}, "手动提交成功");
					}
				}
			],
			fixed : false//是否固定底部
		}
	}).render().then(function() {
		if (!hasClsPicker) return;
		_u.vetically("#fbutton-fbutton");
		clsPicker.golalSetting({
			container: "#fbutton-fbutton",
			type: "FButton"
		});
		new clsPicker({
			selector: ".wev-btn-wrapper.wev-btn-block",
			text: ".wev-btn-wrapper",
			lineYSkew: 110,
			skew: [15, ""]
		});
		new clsPicker({
			selector: ".wev-btn.wev-btn-reset",
			text: ".wev-btn-reset",
			lineYSkew: 80,
		});
		new clsPicker({
			selector: ".wev-btn.wev-btn-submit",
			text: ".wev-btn-submit",
			lineYSkew: 20,
			skew: [8, ""]
		});
		new clsPicker({
			selector: ".wev-btn.wev-btn-custom",
			text: ".wev-btn-custom",
			lineYSkew: 50,
			skew: [1.3, ""],
			position: "bottom left"
		});
	});
});
</script>