demo.html
2.76 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
<div id="navpanel" class="page out" data-title="导航面板插件">
<div id="navpanel-header"></div>
<div id="navpanel-a"></div>
</div>
<script>
require(["NavPanel", "NavHeader"], function(NavPanel, NavHeader) {
var _u = require("mUtil");
var hasClsPicker = typeof clsPicker !== "undefined";
if(!hasClsPicker) {
new NavHeader({
el: "navpanel-header",
option: {
title:"导航面板插件",
smallTitle:"navpanel"
}
}).render();
}
var nav = new NavPanel({
el: "navpanel-a",
option: {
row : 2,//行数
col : 4,//列数
radius : true,//图片圆角
items:[
{
text : "导航头",
icon : "/mobilemode/mobile/demo/plugin/NavPanel/avatar.jpg",
url : "/mobilemode/mobile/demo/plugin/NavHeader/demo.html?a=1&b=2",
dataAjax : true,
remind : true
},
{text : "导航栏", url : "/mobilemode/mobile/demo/plugin/Navigation/demo.html",icon : "/mobilemode/piclibrary/icon5/icon01.png"},
{text : "Tab页插件", url : "/mobilemode/mobile/demo/plugin/Tab/demo.html",icon : "/mobilemode/piclibrary/icon5/icon02.png"},
{text : "标签栏插件", url : "/mobilemode/mobile/demo/plugin/TabBar/demo.html",icon : "/mobilemode/piclibrary/icon5/icon03.png"},
{text : "列表插件", url : "/mobilemode/mobile/demo/plugin/List/demo.html",icon : "/mobilemode/piclibrary/icon5/icon04.png"},
{text : "URL列表", url : "/mobilemode/mobile/demo/plugin/UrlList/demo.html",icon : "/mobilemode/piclibrary/icon5/icon05.png"},
{text : "分栏插件", url : "/mobilemode/mobile/demo/plugin/ColumnBreak/demo.html",icon : "/mobilemode/piclibrary/icon5/icon06.png"},
{text : "HTML", url : "/mobilemode/mobile/demo/plugin/Html/demo.html",icon : "/mobilemode/piclibrary/icon5/icon07.png"},
{text : "按钮插件", url : "/mobilemode/mobile/demo/plugin/Button/demo.html",icon : "/mobilemode/piclibrary/icon5/icon08.png"}
],
badge: [5],
callback : {
click : function(data){
console.log("点击"+data.text+"按钮");
}
}
}
});
nav.render().then(function() {
if (!hasClsPicker) return;
_u.vetically("#navpanel-a");
clsPicker.golalSetting({
container: ".wev-comp-NavPanel",
type: "NavPanel"
});
new clsPicker({
selector: ".wev-comp-swipe-wrap",
lineYSkew: 20,
skew: [4.5, ""]
});
new clsPicker({
selector: ".wev-badge",
lineYSkew: 50,
});
new clsPicker({
selector: ".wev-big-icon",
lineYSkew: 80,
skew: [4, ""]
});
new clsPicker({
selector: ".wev-table-view-cell",
lineYSkew: 110,
skew: [4, ""]
});
new clsPicker({
selector: ".curr-point",
lineYSkew: 20
});
new clsPicker({
selector: ".wev-comp-swipe-point",
lineYSkew: 50,
skew: [4, ""]
});
});
});
</script>