demo.html
3.18 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
<div id="steps" class="page out" data-title="步骤条插件">
<div id="steps-a-break" style="margin-bottom:10px;"></div>
<div id="steps-a"></div>
<div id="steps-b-break" style="margin:10px 0;"></div>
<div id="steps-b"></div>
<div id="steps-b-control"></div>
</div>
<script>
require(["NavHeader", "Steps", "ColumnBreak", "Button"], function(NavHeader, Steps, ColumnBreak, Button) {
var _u = require("mUtil");
var hasClsPicker = typeof clsPicker !== "undefined";
if(!hasClsPicker){
new ColumnBreak({
el: "steps-a-break",
option: {
content:"步骤条-横向排列",
align:"center"
}
}).render();
}
new Steps({
el: "steps-a",
container: "#steps",
option: {
direction: 'horizontal',//水平horizontal 垂直vertical
steps: [
{
title: "下单预订",
desc: "2019-03-20",
},
{
title: "客服审核",
desc: "审核通过会有快递上门",
status: 'current'
},
{
title: "快递单号生成",
desc: "请注意客服连线",
}
]
}
}).render().then(function(){
if (!hasClsPicker) return;
_u.vetically("#steps-a");
});
if(!hasClsPicker){
new ColumnBreak({
el: "steps-b-break",
option: {
content:"步骤条-纵向排列",
align:"center"
}
}).render();
new Steps({
el: "steps-b",
container: "#steps",
option: {
direction: 'vertical',//水平horizontal 垂直vertical
steps: [
{
title: "下单预订",
desc: "2019-03-20"
},
{
title: "客服审核",
desc: "审核通过会有快递上门"
},
{
title: "快递单号生成",
desc: "请注意客服连线",
status: 'current'
},
{
title: "订单完成",
desc: "请对此次服务给出评价",
}
]
}
}).render();
new Button({
el:"steps-b-control",
option:{
layout : "relative",
items : [
{
text : "上一步",
click : function(){
_u.getInstance("steps-b").setPrev();
}
},
{
text : "下一步",
click : function(){
_u.getInstance("steps-b").setNext();
}
}
]
}
}).render();
}
});
</script>