demo.html
2.04 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
<div id="progressbar" class="page out" data-title="进度条插件">
<div id="progressbar-header"></div>
<div id="progressbar-a"></div>
<div id="progressbar-b"></div>
<div id="progressbar-c"></div>
<div id="progressbar-d"></div>
<div id="progressbar-e"></div>
<div id="progressbar-f"></div>
</div>
<script>
require(["NavHeader", "ProgressBar", "ColumnBreak"], function(NavHeader, ProgressBar, ColumnBreak) {
var _u = require("mUtil");
var hasClsPicker = typeof clsPicker !== "undefined";
if (!hasClsPicker) {
new NavHeader({
el: "progressbar-header",
option: {
title:"进度条插件",
smallTitle:"progressbar"
}
}).render();
new ColumnBreak({
el: "progressbar-a",
option: {
content : "简单配置",
align : "center"
}
}).render();
new ProgressBar({
el: "progressbar-b",
option: {
value : 50
}
}).render();
new ColumnBreak({
el: "progressbar-c",
option: {
content : "颜色区间配置",
align : "center"
}
}).render();
new ProgressBar({
el: "progressbar-d",
option: {
value : 75,
areaColor : [
{startPercent : 0, endPercent : 30, areaColor : "#4ED8F2"},
{startPercent : 30, endPercent : 80, areaColor : "#de0000"},
{startPercent : 80, endPercent : 100, areaColor : "#771bb5"}
]
}
}).render();
new ColumnBreak({
el: "progressbar-e",
option: {
content : "完整配置",
align : "center"
}
}).render();
}
new ProgressBar({
el: "progressbar-f",
option: {
value : 90,
areaColor : "#0a55a6",
bgcolor : "#DDD",
fontColor : "#FFF",
lineHeight : "22px",
fontSize : "12px",
showValue : true
}
}).render().then(function() {
if (!hasClsPicker) return;
_u.vetically("#progressbar-f");
clsPicker.golalSetting({
container: ".wev-comp-ProgressBar",
type: "ProgressBar"
});
new clsPicker({
selector: ".wev-progress-bar",
lineYSkew: 20,
skew: [10, ""]
});
new clsPicker({
selector: ".wev-progress-bar>div",
lineYSkew: 20,
position: "top right"
});
});
});
</script>