Skip to content

M
Mui

github_dfer / Mui
9 个月 前同步成功

通知 0
Star 0
Fork 0
M
Mui

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
list.html 17.2 KB
Newer Older
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
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 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 
<!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">
		<style type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<ul id="list" class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/accordion.html">
						accordion（折叠面板）
					</a>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						actionsheet（操作表）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/actionsheet.html">
								H5模式actionsheet
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/actionsheet-plus.html">
								原生模式actionsheet
							</a>
						</li>
					</ul>
				</li>
				
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/ajax.html">
						ajax（网络请求）
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/badges.html">
						badge（数字角标）
					</a>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						button（按钮）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/buttons.html">
								普通按钮
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/buttons-with-icons.html">
								带图标的按钮
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/buttons-with-badges.html">
								带数字的按钮
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/buttons-with-block.html">
								块级按钮
							</a>
						</li>
					</ul>

				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/checkbox.html">
						checkbox（复选框）
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/dialog.html">
						dialog（消息框）
					</a>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						gallery slider（图片轮播）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/slider-default.html">
								默认样式

							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/slider-with-title.html">
								下方悬浮标题

							</a>
						</li>
					</ul>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						gallery table（图文表格）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/slider-table-default.html">
								默认样式
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/slider-table-pagination.html">
								左右滑动分页样式
							</a>
						</li>
					</ul>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						grid（9宫格）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/grid-default.html">
								默认样式
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/grid-pagination.html">
								可左右滑动的9宫导航
							</a>
						</li>
					</ul>
				</li>

				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/icons.html">
						icon（图标）
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/input.html">
						input（输入框）
					</a>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						list（列表）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tableviews.html">
								普通列表
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tableviews-with-badges.html">
								右侧带数字角标
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/list-with-input.html">
								列表带input类控件
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/list-triplex-row.html">
								三行列表
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tableviews-with-collapses.html">
								二级列表
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tableviews-with-swipe.html">
								滑动触发列表项菜单
							</a>
						</li>
					</ul>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/media-list.html">
						media list（图文列表）
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" open-type="common" href="examples/nav.html">
						nav bar（导航栏）
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/numbox.html">
						number box（数字输入框）
					</a>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						off canvas（侧滑导航）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-right-plus-main.html">
								webview模式右滑菜单
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-left-plus-main.html">
								webview模式左滑菜单
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-right.html">
								div模式右滑菜单
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-left.html">
								div模式左滑菜单
							</a>
						</li>
hbcui1984's avatar
编译至mui v1.6.0  
hbcui1984 已提交
235 236 
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-down.html">
hbcui1984's avatar
hello mui中setting模板增加评分鼓励  
hbcui1984 已提交
237 
								div模式下拉菜单
hbcui1984's avatar
编译至mui v1.6.0  
hbcui1984 已提交
238 239 
							</a>
						</li>
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
240 241 242 243 244 245 246 247 248 249 250 251 
					</ul>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/pagination.html">
						pagination（分页）
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/popovers.html">
						popover（弹出菜单）
					</a>
				</li>
hbcui1984's avatar
编译至mui v1.8.0  
hbcui1984 已提交
252 253 254 255 256 257 258 259 260 261 262 263 264 265 
				<li class="mui-table-view-cell mui-collapse">
					<a href="#" class="mui-navigate-right">pull to refresh（下拉刷新和上拉加载更多）</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" open-type="common" href="examples/pullrefresh_main.html">
								默认实现
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" open-type="common" href="examples/pullrefresh_with_tab.html">
								选项卡切换+下拉刷新
							</a>
						</li>
					</ul>
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/radio.html">
						radio（单选框）
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/range.html">
						range（滑块）
					</a>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						segment（分段选择）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tab-with-segmented-control.html">
								按钮式选项卡
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tab-with-viewpagerindicator.html">
								可拖动选项卡(仿Android)
							</a>
						</li>
					</ul>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/switches.html">
						switch（开关）
					</a>
				</li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
						tab bar（选项卡）
					</a>
					<ul class="mui-table-view mui-table-view-chevron">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tabbar.html">
								div模式
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" open-type="common" href="examples/tab-webview-main.html">
								webview模式
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tabbar-labels-only.html">
								文字选项卡
							</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right" href="examples/tabbar-with-submenus.html">
								含二级菜单的选项卡
							</a>
						</li>
					</ul>
				</li>
hbcui1984's avatar
编译至mui v1.6.0  
hbcui1984 已提交
326
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
327 328 329 330 331 
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/typography.html">
						typography（文字）
					</a>
				</li>
hbcui1984's avatar
编译至mui v1.6.0  
hbcui1984 已提交
332 333 
				
				<li class="mui-table-view-divider">模板</li>
hbcui1984's avatar
编译至mui v1.8.0  
hbcui1984 已提交
334 335 336 337 338 339 340 341 342 343 
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/dtpicker.html">
						dtpicker（日期时间选择器） 
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/imageviewer-new.html">
						image viewer（图片预览）
					</a>
				</li>
hbcui1984's avatar
修改radio/checkbox的disabled样式  
hbcui1984 已提交
344 345 346 347 348 
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/lazyload-image.html">
						lazyload（懒加载） 
					</a>
				</li>
hbcui1984's avatar
新增城市联动模板  
hbcui1984 已提交
349 
				<li class="mui-table-view-cell">
hbcui1984's avatar
编译至mui v1.8.0  
hbcui1984 已提交
350 
					<a class="mui-navigate-right" href="examples/poppicker.html">
hbcui1984's avatar
新增城市联动模板  
hbcui1984 已提交
351 352 353 
						list picker（选择列表） 
					</a>
				</li>
hbcui1984's avatar
编译至mui v1.6.0  
hbcui1984 已提交
354 355 356 357 358 359 
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="examples/locker-dom.html">
						locker（手势图案锁屏） 
					</a>
				</li>
				<li class="mui-table-view-cell">
hbcui1984's avatar
修改radio/checkbox的disabled样式  
hbcui1984 已提交
360 361 
					<a class="mui-navigate-right" open-type="common" href="examples/setting.html">
						setting（设置）
hbcui1984's avatar
编译至mui v1.6.0  
hbcui1984 已提交
362 363 
					</a>
				</li>
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
364 
			</ul>
hbcui1984's avatar
编译至mui v1.6.0  
hbcui1984 已提交
365
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
366 
		</div>
hbcui1984's avatar
删除hello mui中的app.js，精简工程代码  
hbcui1984 已提交
367 
		<script src="js/mui.min.js"></script>
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
368 
		<script>
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
369 370 
			var aniShow = "pop-in";
			 //只有ios支持的功能需要在Android平台隐藏；
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
371 372 373 374 375 376 377 
			if (mui.os.android) {
				var list = document.querySelectorAll('.ios-only');
				if (list) {
					for (var i = 0; i < list.length; i++) {
						list[i].style.display = 'none';
					}
				}
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
378 
				//Android平台暂时使用slide-in-right动画
hbcui1984's avatar
hello mui动画修改为slide-in-right  
hbcui1984 已提交
379 
				aniShow = "slide-in-right"
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
380 
			}
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
381 
			 //初始化，并预加载webview模式的选项卡
hbcui1984's avatar
将webview模式选项卡改为预加载  
hbcui1984 已提交
382 
			mui.init({
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
383 
				preloadPages: [{
hbcui1984's avatar
将hello mui中的页面切换动画变为pop-in  
hbcui1984 已提交
384 385 386 387 388 389 390 
					url: 'examples/tab-webview-main.html'
				},
				{
					url:"examples/pullrefresh_main.html",
					styles:{
						popGesture:'hide'
					}
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
391 
				}]
hbcui1984's avatar
将webview模式选项卡改为预加载  
hbcui1984 已提交
392 
			});
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
393 
			var templates = {};
hbcui1984's avatar
将hello mui中的页面切换动画变为pop-in  
hbcui1984 已提交
394 
			var getTemplate = function(name, header, content) {
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
395 396 397 398 
				var template = templates[name];
				if (!template) {
					//预加载共用父模板；
					var headerWebview = mui.preload({
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
399 400 401 402 
						url: header,
						id: name + "-main",
						styles: {
							popGesture: "hide",
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
403 
						},
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
404 
						extras: {
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
405 406 407 408 409 
							mType: 'main'
						}
					});
					//预加载共用子webview
					var subWebview = mui.preload({
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
410 411 412 
						url: !content ? "" : content,
						id: name + "-sub",
						styles: {
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
413 414 415 
							top: '45px',
							bottom: '0px',
						},
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
416 
						extras: {
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
417 418 419 420 421 422 
							mType: 'sub'
						}
					});
					subWebview.addEventListener('loaded', function() {
						setTimeout(function() {
							subWebview.show();
hbcui1984's avatar
hello mui动画修改为slide-in-right  
hbcui1984 已提交
423 
						}, 50);
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 
					});
					subWebview.hide();
					headerWebview.append(subWebview);
					//iOS平台支持侧滑关闭，父窗体侧滑隐藏后，同时需要隐藏子窗体；
					if (mui.os.ios) { //5+父窗体隐藏，子窗体还可以看到？不符合逻辑吧？
						headerWebview.addEventListener('hide', function() {
							subWebview.hide("none");
						});
					}
					templates[name] = template = {
						name: name,
						header: headerWebview,
						content: subWebview,
					};
				}
				return template;
			};
			var initTemplates = function() {
				getTemplate('default', 'examples/template.html');
			};
			mui.plusReady(function() {
				//初始化模板
				initTemplates(); //预加载所有模板	
				//关闭splash页面；
				plus.navigator.closeSplashscreen();
			});
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
450 
			 //主列表点击事件
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
451 452 
			mui('#list').on('tap', 'a', function() {
				var id = this.getAttribute('href');
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
453 
				var href = this.href;
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
454 
				var type = this.getAttribute("open-type");
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
455 
				//不使用父子模板方案的页面
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
456 
				if (type == "common") {
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
457 458 459 460 
					var webview_style = {
						popGesture: "close"
					};
					//侧滑菜单需动态控制一下zindex值；
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
461 
					if (~id.indexOf('offcanvas-')) {
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 
						webview_style.zindex = 9998;
						webview_style.popGesture = ~id.indexOf('offcanvas-with-right') ? "close" : "none";
					}
					mui.openWindow({
						id: id,
						url: this.href,
						styles: webview_style,
						show: {
							aniShow: aniShow
						},
						waiting: {
							autoShow: false
						}
					});
				} else if (id && ~id.indexOf('.html')) {
hbcui1984's avatar
hello mui动画修改为slide-in-right  
hbcui1984 已提交
477 
					if (!~id.indexOf('popovers.html')&&!~id.indexOf('tab-with-viewpagerindicator.html') && mui.os.ios) {
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
478 479 480 481 
						mui.openWindow({
							id: id,
							url: this.href,
							styles: {
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
482 483 484 485 
								popGesture: 'close'
							},
							show: {
								aniShow: aniShow
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
486 487 488 489 490 491 
							},
							waiting: {
								autoShow: false
							}
						});
					} else {
hbcui1984's avatar
将hello mui中的页面切换动画变为pop-in  
hbcui1984 已提交
492 
						//TODO  by chb 当初这么设计，是为了一个App中有多个模板，目前仅有一个模板的情况下，实际上无需这么复杂
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
493 
						//使用父子模板方案打开的页面
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
494 
						//获得共用模板组
hbcui1984's avatar
将hello mui中的页面切换动画变为pop-in  
hbcui1984 已提交
495 
						var template = getTemplate('default');
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
496 
						//判断是否显示右上角menu图标；
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
497 
						var showMenu = ~href.indexOf('popovers.html') ? true : false;
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
498 499 
						//获得共用父模板
						var headerWebview = template.header;
hbcui1984's avatar
hello mui动画修改为slide-in-right  
hbcui1984 已提交
500 501 
						//获得共用子webview
						var contentWebview = template.content;
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
502 503 
						var title = this.innerText.trim();
						//通知模板修改标题，并显示隐藏右上角图标；
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
504 505 
						mui.fire(headerWebview, 'updateHeader', {
							title: title,
hbcui1984's avatar
hello mui动画修改为slide-in-right  
hbcui1984 已提交
506 
							showMenu: showMenu
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
507 
						});
hbcui1984's avatar
hello mui动画修改为slide-in-right  
hbcui1984 已提交
508 509 510 511 512 513 514 515 516 517 518 519 520 521 
						
						var reload = true;
						if (!template.loaded) {
							if (contentWebview.getURL() != this.href) {
								contentWebview.loadURL(this.href);
							} else {
								reload = false;
							}
						} else {
							reload = false;
						}
						(!reload) && contentWebview.show();
						
						headerWebview.show(aniShow, 150);
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
522 523 524 
					}
				}
			});
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
525 526 
			var index = null; //主页面
			function openMenu() {
hbcui1984's avatar
将hello mui中的页面切换动画变为pop-in  
hbcui1984 已提交
527 528 529 530 
				!index && (index = mui.currentWebview.parent());
				mui.fire(index, "menu:open");
			}
			//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
531 
			window.addEventListener('dragstart', function(e) {
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
532 533 534 535 
				mui.gestures.touch.lockDirection = true; //锁定方向
				mui.gestures.touch.startDirection = e.detail.direction;
			});
			window.addEventListener('dragright', function(e) {
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
536 537 
				if (!mui.isScrolling) {
					e.detail.gesture.preventDefault();
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
538 539 
				}
			});
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
540 541 
			 //监听右滑事件，若侧滑菜单未显示，右滑要显示菜单；
			window.addEventListener("swiperight", function(e) {
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
542 
				//默认滑动角度在-45度到45度之间，都会触发右滑菜单，为避免误操作，可自定义限制滑动角度；
hbcui1984's avatar
hello mui在iOS平台不再使用模板方案  
hbcui1984 已提交
543 
				if (Math.abs(e.detail.angle) < 4) {
hbcui1984's avatar
编译至v1.5.0  
hbcui1984 已提交
544 545 546 547 548 549 
					openMenu();
				}
			});
		</script>
	</body>
hbcui1984's avatar
编译至mui v 1.0.0  
hbcui1984 已提交
550 
</html>