-
Notifications
You must be signed in to change notification settings - Fork 0
/
enter.html
129 lines (125 loc) · 4.26 KB
/
enter.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/jquery.min.js"></script>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link href="css/mui-icons-extra.css" rel="stylesheet"/>
<link href="css/indexstyle.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
</script>
</head>
<body>
<div class="mui-inner-wrap">
<!--header start-->
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">网上科技馆</h1>
<a href="####" class="mui-icon mui-icon-contact mui-pull-right" id="login"></a>
</header>
<nav class="mui-bar mui-bar-tab" id="nav">
<a class="mui-tab-item mui-active" id="page1" href="list.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" id="page2" href="explore.html">
<span class="mui-icon mui-icon-extra mui-icon-extra-lamp"></span>
<span class="mui-tab-label">探索</span>
</a>
<a class="mui-tab-item" id="page3" href="activedex.html">
<span class="mui-icon mui-icon-paperplane"></span>
<span class="mui-tab-label">活动</span>
</a>
<a class="mui-tab-item" id="page4" href="help.html">
<span class="mui-icon mui-icon-help"></span>
<span class="mui-tab-label">帮助</span>
</a>
</nav>
<!--header end-->
</div>
<script>
mui.init({
swipeBack:true
});
document.getElementById('login').addEventListener('tap', function() {
//打开关于页面
mui.openWindow({
url: 'seting/set.html',
id:'set',
show:{
autoShow:true,//页面loaded事件发生后自动显示，默认为true
aniShow:'slide-in-right',//页面显示动画，默认为”slide-in-right“；
duration:200,//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
event:'titleUpdate'//页面显示时机，默认为titleUpdate事件时显示
},
waiting:{
autoShow:false,//自动显示等待框，默认为true
}
});
});
//设置默认打开首页显示的子页序号；
var Index=0;
//把子页的路径写在数组里面
var subpages = ['list.html','explore.html','activedex.html','help.html'];
//所有的plus-*方法写在mui.plusReady中或者后面。
mui.plusReady(function() {
//获取当前页面所属的Webview窗口对象
var self = plus.webview.currentWebview();
for (var i = 0; i < 4; i++) {
//创建webview子页
var sub = plus.webview.create(
subpages[i], //子页url
subpages[i], //子页id
{
top: '45px',//设置距离顶部的距离
bottom: '50px'//设置距离底部的距离
}
);
//如不是我们设置的默认的子页则隐藏，否则添加到窗口中
if (i != Index) {
sub.hide();
}
//将webview对象填充到窗口
self.append(sub);
}
});
//当前激活选项
var activeTab = subpages[Index],title=document.querySelector(".mui-title");
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
//获取目标子页的id
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//更换标题
//title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
plus.webview.show(targetTab);
//隐藏当前选项卡
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
/**
* 重写mui.back()，一秒内连续点击两次，退出应用，仅安卓有效；
*/
var first = null;
mui.back = function() {
if(!first) {
first = new Date().getTime();
plus.nativeUI.toast("再按一次退出应用");
setTimeout(function() {
first = null;
}, 1000);
} else {
if(new Date().getTime() - first < 1000) {
plus.runtime.quit();
}
}
};
</script>
</body>
</html>