jfbbs_mui
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</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>
			#logout {
				line-height: 45px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-bars mui-pull-left"></a>
			<a href="javascript:createTopic();" id="createTopic" class="mui-pull-right mui-hidden">
				<span class="mui-icon mui-icon-compose"></span>
			</a>
			<h1 class="mui-title" id="tab-title">话题</h1>
		</header>
		<script src="js/mui.min.js"></script>
		<script src="js/common.js"></script>
		<script>
			var menu = null,
				main = null;
			var showMenu = false;
			mui.init({
				swipeBack: true,
				statusBarBackground: '#f7f7f7',
				gestureConfig: {
					doubletap: true
				},
				subpages: [{
					id: 'list',
					url: 'html/list.html',
					styles: {
						top: '45px',
						bottom: 0,
						bounce: 'vertical'
					},
					show:{
						aniShow: 'slide-in-right'
					}
				}]
			});
		  //根据id向服务器请求新闻详情
			mui.plusReady(function() {
				if (mui.os.android) {
					plus.screen.lockOrientation("portrait-primary");
				}
				plus.storage.setItem(_user_token, '090aef9ccbef4560b1b1449e1f754a84');
				plus.storage.setItem(_tab_, 'all');
				plus.storage.setItem(reply_weiba_active, 'true');
				main = plus.webview.currentWebview();
				main.addEventListener('maskClick', closeMenu);
				//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
				setTimeout(function() {
					menu = mui.preload({
						id: 'index-menu',
						url: 'index-menu.html',
						styles: {
							left: 0,
							width: '70%',
							zindex: -1
						},
						show: {
							aniShow: 'none'
						}
					});
				}, 200);
			});
			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();
				}
			});
			 //敲击顶部导航，内容区回到顶部
			document.querySelector('header').addEventListener('doubletap', function() {
				main.children()[0].evalJS('mui.scrollTo(0, 100)');
			});
			 //主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作
			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秒内，连续两次按返回键，则退出应用；
			var first = null;
			mui.back = function() {
				if (showMenu) {
					closeMenu();
				} else {
					//首次按键，提示‘再按一次退出应用’
					if (!first) {
						first = new Date().getTime();
						mui.toast('再按一次退出应用');
						setTimeout(function() {
							first = null;
						}, 1000);
					} else {
						if (new Date().getTime() - first < 1000) {
							plus.runtime.quit();
						}
					}
				}
			};
			window.addEventListener('showCreateTopic',function(event){
				document.getElementById("createTopic").className = "mui-pull-right mui-block";
			});
			window.addEventListener('hideCreateTopic',function(event){
				document.getElementById("createTopic").className = "mui-pull-right mui-hidden";
			});
			function createTopic() {
				mui.openWindow({
					id: 'create.html',
					url: 'html/create.html'
				});
			}
		</script>
	</body>

</html>