demo.html
2.36 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
<div id="navigation" class="page out" data-title="导航栏插件">
<div id="navigation-header"></div>
<div id="navigation-a"></div>
</div>
<script>
require(["NavHeader", "Navigation", "ColumnBreak"], function(NavHeader, Navigation, ColumnBreak) {
var _u = require("mUtil");
var hasClsPicker = typeof clsPicker !== "undefined";
if(!hasClsPicker) {
new NavHeader({
el: "navigation-header",
option: {
title:"导航栏插件",
smallTitle:"navigation"
}
}).render();
}
var navItems = [{
text: "菜单一",
url: "/mobilemode/mobile/demo/plugin/Navigation/detail.html?type=1",
icon: "/mobilemode/images/homepage/homepage_left_3_wev8.png",
remind: true
}, {
text: "菜单二",
url: "/mobilemode/mobile/demo/plugin/Navigation/detail.html?type=2",
icon: "/mobilemode/images/homepage/homepage_left_4_wev8.png"
}, {
text: "菜单三",
url: "/mobilemode/mobile/demo/plugin/Navigation/detail.html?type=3",
icon: "/mobilemode/images/homepage/homepage_left_5_wev8.png",
group: true
}, {
text: "菜单四",
url: "/mobilemode/mobile/demo/plugin/Navigation/detail.html?type=4",
icon: "/mobilemode/images/homepage/homepage_left_3_wev8.png",
remind: true
}, {
text: "菜单五",
url: "/mobilemode/mobile/demo/plugin/Navigation/detail.html?type=5",
icon: "/mobilemode/images/homepage/homepage_left_4_wev8.png"
}, {
text: "菜单六",
url: "/mobilemode/mobile/demo/plugin/Navigation/detail.html?type=6",
icon: "/mobilemode/images/homepage/homepage_left_5_wev8.png"
}];
var nav = new Navigation({
el: "navigation-a",
option: {
items: !hasClsPicker ? navItems : navItems.slice(0, 1),
badge: [5, 8]
}
});
nav.render().then(function() {
if (!hasClsPicker) return;
_u.vetically("#navigation-a");
clsPicker.golalSetting({
container: ".wev-comp-Navigation",
type: "Navigation"
});
new clsPicker({
selector: ".wev-table-view-cell",
text: ".wev-table-view-cell",
lineYSkew: 20,
skew: [3, ""]
});
new clsPicker({
selector: ".wev-table-view-cell a",
text: ".wev-navigate-right",
lineYSkew: 50,
skew: [4, ""]
});
new clsPicker({
selector: ".wev-table-view-cell .wev-icon",
text: ".wev-icon",
lineYSkew: 50,
position: "top right"
});
new clsPicker({
selector: ".wev-badge",
text: ".wev-badge",
lineYSkew: 20,
position: "top left"
});
});
});
</script>