demo.html
2.51 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
<div id="tabbar" class="page out" data-title="标签栏插件">
<div class="page-content" id="tabbar_content">
<div class="page-scroller" id="tabbar_scroller" data-form="show_hide">
<div id="tabbar-nav"></div>
<div id="tabbar-html"></div>
<div id="tabbar-main"></div>
</div>
</div>
</div>
<script>
require(["NavHeader", "TabBar", "Html"], function(NavHeader, TabBar, Html) {
var _u = require("mUtil");
var hasClsPicker = typeof clsPicker !== "undefined";
if(!hasClsPicker) {
new NavHeader({
el: "tabbar-nav",
option: {
title:"标签栏插件",
smallTitle:"tabbar"
}
}).render();
new Html({
el: "tabbar-html",
option: {
"htm": [
'<ul>',
'<li>1.标签栏控件首页内容</li>',
'<li>2.标签栏控件首页内容</li>',
'<li>3.标签栏控件首页内容</li>',
'</ul>'
].join('')
}
}).render();
}
new TabBar({
el : "tabbar-main",
container : "#tabbar",//页面顶层元素
option:{
tabs : [
{
text:"首页",
href:"#tabbar_scroller",//首页对应的div
icon : {
normal : "/mobilemode/piclibrary/tbar/t36.png",
active : "/mobilemode/piclibrary/tbar/t36b2.png"
},
remind:true
},
{
text:"tab页",
href:"/mobilemode/mobile/demo/plugin/TabBar/item1.html",
icon : "/mobilemode/piclibrary/tbar/t39b2.png"
},
{
text:"导航栏",
href:"/mobilemode/mobile/demo/plugin/TabBar/item2.html",
remind:true
},
{
text:"日历",
href:"/mobilemode/mobile/demo/plugin/TabBar/item3.html"
},
{
text:"百度一下",
href:"http://m.baidu.com",
dataAjax:false//不支持单页形式(外部地址)直接跳转
}
],
badge : [3,5]
}
}).render().then(function() {
if (!hasClsPicker) return;
_u.vetically(".page-footer");
clsPicker.golalSetting({
container: "#tabbar-main",
type: "TabBar"
});
new clsPicker({
selector: ".wev-comp-TabBar",
skew: [5, ""],
lineYSkew: 20
});
new clsPicker({
selector: ".wev-tabbar-label",
lineYSkew: 50
});
new clsPicker({
selector: ".wev-badge",
lineYSkew: 20,
position: "top right"
});
new clsPicker({
selector: ".wev-tabbar-icon",
lineYSkew: 50,
position: "top right"
});
new clsPicker({
selector: ".wev-tabbar-item",
text: ".wev-tabbar-item",
lineYSkew: 80,
skew: [4, ""],
position: "top right"
});
});
});
</script>