-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
218 lines (206 loc) · 6.86 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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!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/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link href="css/MCalendar.css" rel="stylesheet"/>
<link href="css/iconfont.css" rel="stylesheet"/>
<style type="text/css">
.mui-bar-nav{
background-color: #000;
}
.mui-bar .mui-title {
color:#fff
}
</style>
<script type="text/javascript" charset="utf-8">
mui.init({
gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:false,//默认为false，不监听
release:false//默认为false，不监听
}
});
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
<h1 class="mui-title">极简记事</h1>
</header>
<div class="mui-content">
<!--<div class="mui-content-padded">
<p>这是webview模式右滑导航示例，主页面和菜单在不同的webview中，
优点是支持菜单内容在多页面的复用，缺点是不支持拖动手势（跟手）；
当前页面为主界面，你可以在主界面放置任何内容；
</p>
<p style="padding: 5px 20px;margin-bottom: 5px;">
<button id="show-btn" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 10px;">显示侧滑菜单</button>
</p>
</div>-->
<div id="container">
</div>
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view">
</ul>
</div>
<div>
<span id="add" class="mui-icon iconfont icon-add mc-bottom"></span>
<!--<span id="addImg" class="mui-icon iconfont icon-add mc-bottom"></span>-->
<span id="audio" class="mui-icon iconfont icon-add mc-test"></span>
</div>
</div>
</body>
<script src="js/MCalendar.js"></script>
<script src="js/websql.js"></script>
<script>
//生成2个对象分别控制主窗口和菜单窗口；
var menu = null,main = null;
var showMenu = false;
var isInTransition = false;
mui.plusReady(function(){
// var page = mui.preload({
// url:'add.html',
// id:'add.html',
// styles:{},//窗口参数
// extras:{}//自定义扩展参数
// });
//websql
CreateDataBase('NoteDB');
CreateTable('NoteList');
//初始化日历
var MC = mui("#container").MCalendar(mui.DateUtil.getToday());
var add = document.querySelector('#add');
//添加事件
add.addEventListener("tap",function(){
mui.openWindow({
url:'add.html',
id:'add.html'
});
});
window.addEventListener('refresh',function(event){
//通过event.detail可获得传递过来的参数内容
var id = event.detail.id;
var notetime = event.detail.notetime;
var noteinfo = event.detail.noteinfo;
var ndate = event.detail.ndate; //时间戳
var ntime = event.detail.ntime; //时间戳
var oldtime = event.detail.oldtime; //时间戳
if(!id) {
//插入数据库
ExeSql('INSERT INTO NoteList (notedate, notetime, noteinfo) VALUES ("' + ndate + '", "' + ntime + '", "' + noteinfo + '")');
} else {
//更新数据库
ExeSql('UPDATE NoteList set notedate = "' + ndate + '", notetime = "' + ntime + '", noteinfo = "' + noteinfo + '" where id = ' + id);
}
//刷新指定位置的页面
if(oldtime) {
var o = new Date(oldtime * 1000);
MC.checkHasData(o);
}
var d = new Date(ntime * 1000);
MC.changeDate(d);
});
// var addImg = document.querySelector('#addImg');
//
// //添加事件
// addImg.addEventListener("tap",function(){
// mui.openWindow({
// url:'addImg.html',
// id:'addImg.html'
// });
// });
var audio = document.querySelector('#audio');
//添加事件
audio.addEventListener("tap",function(){
mui.openWindow({
url:'audio.html',
id:'audio.html'
});
});
main = plus.webview.currentWebview();
main.addEventListener('maskClick', closeMenu);
//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
setTimeout(function() {
menu = mui.preload({
id: 'sidemenu.html',
url: 'sidemenu.html',
styles: {
left: 0,
width: '70%',
zindex: -1
}
});
}, 200);
}
);
//打开侧滑窗口；
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: 200
}
});
mui.later(function() {
isInTransition = false;
menu.setStyle({
mask: "none"
}); //移除menu的mask
}, 200);
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();
}, 200);
}
};
//点击头部菜单小图标，打开侧滑菜单；
document.querySelector('.mui-icon-bars').addEventListener('tap', openMenu);
//点击自定义按钮，打开侧滑菜单；
//document.querySelector('#show-btn').addEventListener('tap', openMenu);
//menu页面点击后关闭菜单；
window.addEventListener("menu:tap", closeMenu);
</script>
</html>