demo.html
3.29 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<div id="fphoto" class="page out" data-title="拍照">
<div class="page-content" id="fphoto_content">
<div id="fphoto-header"></div>
<div id="fphoto-form"></div>
<div id="fphoto-photo"></div>
<div id="fphoto-break"></div>
<div id="fphoto-photo2"></div>
<div id="fphoto-fbutton"></div>
</div>
</div>
<script>
require(["NavHeader", "Form", "FPhoto", "FButton"], function(NavHeader, Form, FPhoto, FButton) {
var _u = require("mUtil");
var hasClsPicker = typeof clsPicker !== "undefined";
if (!hasClsPicker) {
new NavHeader({
el: "fphoto-header",
option: {
title:"表单-拍照",
smallTitle:"fphoto"
}
}).render();
new Form({
el: "fphoto-form",
option: {
submit : {
action : "/mobilemode/mobile/demo/plugin/Form/formAction.jsp",//提交地址
validate : function(){
//表单提交前验证脚本
}
}
}
}).render();
}
new FPhoto({
el: "fphoto-photo",
option: {
form: "fphoto-form",
field : {
label : "拍照", //显示名
name : "photo", //字段名
value : "", //字段值,数据库保存值,文档id,如427,428,429
},
compress : {
quality : 1, //质量:值越小,质量越低,图片压缩后体积越小,但图片也会越不清晰。该值设置介于0.1 至 1之间
zoom : 1 //压缩时会以图片的原始宽高会乘以缩放比例,值越小,压缩后图片的宽高越小,体积也会越小。该值设置介于0.1 至 1之间
},
watermark: {
add : true, //是否添加水印
position : 1, //水印位置
font : "Verdana", //水印字体
color : "#F8F8F8", //字体颜色
fontsize : "18", //字体大小px
fontweight : "normal", //是否加粗
content : "{CURRDATE} {CURRTIME}" //水印内容
},
draw : true, //是否绘制
source : { //照片来源
browser : true, //选择照片
takephoto : true//拍照
},
limit : 0, //最大图片张数,0表示不限制
required : true,
readonly : false
}
}).render().then(function() {
if (!hasClsPicker) return;
_u.vetically("#fphoto-photo");
clsPicker.golalSetting({
container: ".wev-comp-FPhoto",
type: "FPhoto"
});
new clsPicker({
selector: ".wev-field.vertical",
text: ".wev-field.vertical",
lineYSkew: 20
});
new clsPicker({
selector: ".wev-field.vertical>div:nth-child(1)",
text: " ",
lineYSkew: 20,
});
new clsPicker({
selector: ".wev-upload>span",
text: " ",
lineYSkew: 80,
});
new clsPicker({
selector: ".wev-img-wrapper",
text: ".wev-img-wrapper",
lineYSkew: 50,
skew: [3, ""]
});
new clsPicker({
selector: ".wev-upload",
text: ".wev-upload",
lineYSkew: 50,
skew: [1.2, ""],
position: "top right"
});
});
if (!hasClsPicker) {
new FPhoto({
el: "fphoto-photo2",
option: {
form: "fphoto-form",
field : {
name : "photo" //字段名
},
limit : 3
}
}).render();
new FButton({
el: "fphoto-fbutton",
container: "#fphoto",
option: {
form : "fphoto-form",
btns : [
{
text : "重置",
action : "reset"
},
{
text : "提交",
action : "submit",
callback : function(billid) {
console.log(billid);
},
remindMsg : "操作成功"
}
],
fixed : true
}
}).render();
}
});
</script>