forked from atjiu/hltmapp-mui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
170 lines (166 loc) · 4.4 KB
/
index.html
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-bars mui-pull-left mui-plus-visible"></a>
<a id="search" class="mui-icon mui-icon-search mui-pull-right"></a>
<h1 class="mui-title">红旅动漫</h1>
</header>
<script src="js/mui.min.js"></script>
<script src="js/zepto.min.js"></script>
<script src="js/common.js"></script>
<script src="js/update.js"></script>
<script>
var menu = null,
main = null;
var showMenu = false;
mui.init({
swipeBack: false,
statusBarBackground: '#f7f7f7',
gestureConfig: {
doubletap: true
},
subpages: [{
id: 'list',
url: 'index-sub.html',
styles: {
top: '45px',
bottom: 0,
bounce: 'vertical'
}
}]
});
mui.plusReady(function() {
updateResources();
//仅支持竖屏显示
plus.screen.lockOrientation("portrait-primary");
main = plus.webview.currentWebview();
main.addEventListener('maskClick', closeMenu);
//敲击顶部导航，内容区回到顶部
document.querySelector('header').addEventListener('doubletap', function() {
main.children()[0].evalJS('mui.scrollTo(0, 100)');
});
//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
setTimeout(function() {
menu = mui.preload({
id: 'index-menu',
url: 'index-menu.html',
styles: {
left: 0,
width: '70%',
zindex: -1
},
show: {
aniShow: 'none'
}
});
}, 200);
$("#search").on("tap", function() {
Common.open("search.html", "search.html");
});
});
var isInTransition = false;
/**
* 显示侧滑菜单
*/
function openMenu() {
if(isInTransition) {
return;
}
if(!showMenu) {
//侧滑菜单处于隐藏状态，则立即显示出来；
isInTransition = true;
menu.setStyle({
mask: 'rgba(0,0,0,0)'
}); //menu设置透明遮罩防止点击
menu.show('none', 0, function() {
//主窗体开始侧滑并显示遮罩
main.setStyle({
mask: 'rgba(0,0,0,0.4)',
left: '70%',
transition: {
duration: 150
}
});
mui.later(function() {
isInTransition = false;
menu.setStyle({
mask: "none"
}); //移除menu的mask
}, 160);
showMenu = true;
});
}
};
/**
* 关闭菜单
*/
function closeMenu() {
if(isInTransition) {
return;
}
if(showMenu) {
//关闭遮罩；
//主窗体开始侧滑；
isInTransition = true;
main.setStyle({
mask: 'none',
left: '0',
transition: {
duration: 200
}
});
showMenu = false;
//等动画结束后，隐藏菜单webview，节省资源；
mui.later(function() {
isInTransition = false;
menu.hide();
}, 300);
}
};
//点击左上角侧滑图标，打开侧滑菜单；
document.querySelector('.mui-icon-bars').addEventListener('tap', function(e) {
if(showMenu) {
closeMenu();
} else {
openMenu();
}
});
//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作
window.addEventListener("swiperight", openMenu);
//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
window.addEventListener("swipeleft", closeMenu);
//侧滑菜单触发关闭菜单命令
window.addEventListener("menu:close", closeMenu);
window.addEventListener("menu:open", openMenu);
//重写mui.menu方法，Android版本menu按键按下可自动打开、关闭侧滑菜单；
mui.menu = function() {
if(showMenu) {
closeMenu();
} else {
openMenu();
}
}
//首页返回键处理
//1、若侧滑菜单显示，则关闭侧滑菜单
//2、否则，执行mui框架默认的关闭首页功能
var _back = mui.back;
mui.back = function() {
if(showMenu) {
closeMenu();
} else {
_back();
}
};
</script>
</body>
</html>