結構模板

這里是示例Html, 必須使用Mui框架才能使用。

主容器 <div class="mui-off-canvas-wrap mui-draggable"></div>

菜單窗體 <aside class="mui-off-canvas-right"></aside>

主窗體 <div class="mui-content mui-scroll-wrapper"></div>

左菜單 mui-off-canvas-left 右菜單 mui-off-canvas-right

 

示例1：單頁面側滑（未加載子頁面，實現點擊頁面圖標，顯示不同側滑菜單內容）

<!-- 側滑菜單mOffcanvas -->
		<!-- 主界面不動、菜單移動 -->
		<!-- 側滑導航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<!-- 菜單容器 -->
			<!-- Home -->
			<aside class="mui-off-canvas-left" id="offCanvasSide1" style="background: #fff;">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜單具體展示內容 -->
						Home
					</div>
				</div>
			</aside>
			<!-- Email -->
			<aside class="mui-off-canvas-left" id="offCanvasSide2" style="background: #fff;">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜單具體展示內容 -->
						Email
					</div>
				</div>
			</aside>
			<!-- Chat -->
			<aside class="mui-off-canvas-left" id="offCanvasSide3" style="background: #fff;">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜單具體展示內容 -->
						Chat
					</div>
				</div>
			</aside>
			<!-- Location -->
			<aside class="mui-off-canvas-left" id="offCanvasSide4" style="background: #fff;">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜單具體展示內容 -->
						Location
					</div>
				</div>
			</aside>
			<!-- Search -->
			<aside class="mui-off-canvas-left" id="offCanvasSide5" style="background: #fff;">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜單具體展示內容 -->
						Search
					</div>
				</div>
			</aside>
			<!-- Phone -->
			<aside class="mui-off-canvas-left" id="offCanvasSide6" style="background: #fff;">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜單具體展示內容 -->
						Phone
					</div>
				</div>
			</aside>
			<!-- 主頁面容器 -->
			<div class="mui-inner-wrap">
				<!-- 主頁面標題 -->
				<header class="mui-bar mui-bar-nav">
					<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide1"></a>
					<h1 class="mui-title">單頁側滑菜單</h1>
				</header>
				<nav class="mui-bar mui-bar-tab">
					<a class="mui-tab-item mui-active">
						<span class="mui-icon mui-icon-home"></span>
						<span class="mui-tab-label">首頁</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon mui-icon-phone"></span>
						<span class="mui-tab-label">電話</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon mui-icon-email"></span>
						<span class="mui-tab-label">郵件</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon mui-icon-gear"></span>
						<span class="mui-tab-label">設置</span>
					</a>
				</nav>
				<div class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 主界面具體展示內容 -->
						<!-- 九宮格mGrid -->
						<ul class="mui-table-view mui-grid-view mui-grid-9">
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							    <a href="#offCanvasSide1">
							        <span class="mui-icon mui-icon-home"></span>
							        <div class="mui-media-body">Home</div>
							    </a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							    <a href="#offCanvasSide2">
							        <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
							        <div class="mui-media-body">Email</div>
							    </a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							    <a href="#offCanvasSide3">
							        <span class="mui-icon mui-icon-chatbubble"></span>
							        <div class="mui-media-body">Chat</div>
							    </a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							    <a href="#offCanvasSide4">
							        <span class="mui-icon mui-icon-location"></span>
							        <div class="mui-media-body">Location</div>
							    </a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							    <a href="#offCanvasSide5">
							        <span class="mui-icon mui-icon-search"></span>
							        <div class="mui-media-body">Search</div>
							    </a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							    <a href="#offCanvasSide6">
							        <span class="mui-icon mui-icon-phone"></span>
							        <div class="mui-media-body">Phone</div>
							    </a>
							</li>
						</ul>
					</div>
				</div>
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>　

動畫效果

主界面移動，菜單不動 默認

菜單移動，主界面不動 mui-slide-in

QQ式移動 mui-scalable

 

示例2：自定義側滑（加載子頁面，實現側滑菜單）

index.html

顯示主界面內容，側滑菜單通過 preload頁面預加載 方式導入

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>側滑菜單</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/index.css" rel="stylesheet" />
	</head>

	<body>		
		<!-- mHeader頭部 -->
		<header class="mui-bar mui-bar-nav">
	    	<span class="mui-icon mui-icon-search"></span>
	      	<a class="mui-action-menu mui-icon mui-icon-plusempty mui-pull-right"></a>
	      	<h1 class="mui-title">定位</h1>
	   	</header>
	   
	   	<!-- mTab底部選項卡 -->
	   	<nav class="mui-bar mui-bar-tab">
	   	    <a class="mui-tab-item mui-active">
	   	        <span class="mui-icon mui-icon-home"></span>
	   	        <span class="mui-tab-label">首頁</span>
	   	    </a>
	   	    <a class="mui-tab-item">
	   	        <span class="mui-icon mui-icon-phone"></span>
	   	        <span class="mui-tab-label">電話</span>
	   	    </a>
	   	    <a class="mui-tab-item">
	   	        <span class="mui-icon mui-icon-email"></span>
	   	        <span class="mui-tab-label">郵件</span>
	   	    </a>
	   	    <a class="mui-tab-item">
	   	        <span class="mui-icon mui-icon-gear"></span>
	   	        <span class="mui-tab-label">設置</span>
	   	    </a>
	   	</nav>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			// 創建遮罩層
			var main = mui.createMask(_closeMenu);
			var menu = mui.createMask(_closeMenu);
			var mask = mui.createMask(_closeMenu);
			
			var showMenu = false;
			
			// 頁面初始化,引入子頁面,可以傳入多個子頁面,一個子頁面就是一個對象
			mui.init({
				// 取消右滑關閉功能
				swipeBack: false,
				// beforeback參數對應的函數若返回false，則不再執行mui.back()方法
				beforeBack: back,
				// 子頁面配置
				subpages:[]
			});
			
			// 通過back方法,判斷mui.back()是否執行
			function back() {
				if (showMenu) {
					// 菜單處於顯示狀態,返回鍵應該先關閉菜單,阻止主窗口執行mui.back邏輯
					closeMenu();
					return false;
				} else {
					// 菜單處於隱藏狀態,執行返回時,要先close菜單頁面,然后繼續執行mui.back邏輯關閉主窗口
					menu.close('none');
					return true;
				}
			}
			
			mui.plusReady(function(){	
				// 強制豎屏
				plus.screen.lockOrientation("portrait-primary");
				// 當前webViewObject對象
				main = plus.webview.currentWebview();
				// 自動創建menu窗口
				// setTimeout的目的是等待窗口動畫結束后,再執行create webview操作,避免資源競爭,導致窗口動畫不流暢
				setTimeout(function(){
					// menu頁面預加載
					menu = mui.preload({
						url: 'index-menu.html',
						id: 'index-menu.html',
						styles: {
							left: '30%',
							width: '70%',
							zindex: 999
						}
					});
				},300);
			});
			
			/**
			 * 顯示側滑菜單
			 */
			function openMenu (num) {
				if(!showMenu){
					// 解決android4.4以下版本webview移動時,導致fixed定位元素錯亂的bug
					if (mui.os.android && parseFloat(mui.os.version) < 4.4) {
						document.querySelector("header.mui-bar").style.position = "static";
						// 同時需要修改以下.mui-content的padding-top,否則會多出空白
						document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "0px";
					}
					// 側滑菜單處於隱藏狀態,則立即顯示出來
					menu.show('none', 0, function(){
						menu.setStyle({
							left: '30%',
							transition: {
								duration: 150
							}
						});
					});
					// 顯示主窗體遮罩
					mask.show();
					showMenu = true;
				}
			}
			
			/**
			 * 關閉側滑菜單
			 */
			function closeMenu () {
				// 窗體移動
				_closeMenu();
				// 關閉遮罩
				mask.close();
			}
			
			/**
			 * 關閉側滑菜單(業務部分)
			 */
			function _closeMenu () {
				if (showMenu) {
					// 解決android 4.4以下版本webview移動時,導致fixed定位元素錯亂的bug
					if (mui.os.android && parseFloat(mui.os.version) < 4.4) {
						document.querySelector("header.mui-bar").style.position = "fixed";
						// 同時需要修改以下.mui-content的padding-top，否則會多出空白
						document.querySelector(".mui-bar-nav~.mui-content").style.paddingTop = "44px";
					}
					
					// 設置側滑菜單樣式
					menu.setStyle({
						left: '100%',
						transition: {
							duration: 150
						}
					});
					
					// 等窗體動畫結束后,隱藏菜單webview,節省資源
					setTimeout(function(){
						menu.hide();
					}, 300);
					showMenu = false;
				}
			}
			
			// 點擊側滑側滑圖標,打開側滑菜單
			document.querySelector('.mui-action-menu').addEventListener('tap',openMenu);
			// 在android4.4中的swipe事件,需要preventDefault一下,否則觸發不正常,故,在dragleft,dragright中preventDefault
			window.addEventListener('dragright', function(e){
				e.detail.gesture.preventDefault();
			});
			window.addEventListener('dragleft', function(e){
				e.detail.gesture.preventDefault();
			});
			
			// 主界面向左滑動,若菜單未顯示,則顯示菜單,否則不做任何操作
			window.addEventListener("swipeleft", openMenu);
			// 主界面向右滑動,若菜單已顯示,則關閉菜單,否則不做任何操作
			window.addEventListener("swiperight", closeMenu);
			
			// menu頁面向右滑動,關閉菜單
			window.addEventListener("menu:swiperight", closeMenu);
			
			// 重寫mui.menu方法,android版本menu按鍵按下可自動打開、關閉側滑菜單
			mui.menu = function(){
				if (showMenu) {
					closeMenu();
				} else {
					openMenu();
				}
			}
		</script>
	</body>

</html>

index-menu.html

側滑菜單頁面

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>側滑菜單</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/indexMenu.css" rel="stylesheet"  />
	</head>

	<body>
		<!--mBody主體-->
		<div class="mui-content">
		    <!--側滑菜單內容-->
		    <ul class="mui-table-view">
	            <li class="mui-table-view-cell">
	                <a class="mui-navigate-right">
	                    Item 1
	                </a>
	            </li>
	            <li class="mui-table-view-cell">
	                <a class="mui-navigate-right">
	                     Item 2
	                </a>
	            </li>
	            <li class="mui-table-view-cell">
	                <a class="mui-navigate-right">
	                     Item 3
	                </a>
	            </li>
	        </ul>
		</div>
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			// 關閉back、menu按鍵監聽,這樣側滑主界面會自動獲得back和menu的按鍵事件,僅在主界面處理按鍵邏輯即可
			mui.init({
				keyEventBind: {
					backbutton: false,
					menubutton: false
				}
			});
			// 定義main用於指向當前webveiewObject
			var main = null;
			mui.plusReady(function(){
				// 獲取當前Webview窗口的創建者
				main = plus.webview.currentWebview().opener();
			});
			
			// 關閉菜單
			function closeMenu () {
				// mui.fire觸發自定義事件
				mui.fire(main,"menu:swiperight");
			}
			
			// 左滑顯示出來的菜單,只需監聽右滑,然后將菜單關閉即可。在該菜單上左滑,不做任何操作
			window.addEventListener("swiperight",closeMenu);
		</script>
	</body>

</html>

.