hero
hero
  • 发布:2015-02-04 15:33
  • 更新:2019-04-26 14:07
  • 阅读:3381

侧滑菜单在同一界面是否能有两个,怎么实现?

分类:MUI

侧滑菜单在同一界面是否能有两个,采用div模式,一个向左,一个向右,能分别进行显示和关闭?

2015-02-04 15:33 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

支持。把左右两个菜单区域都放进去就行了

<!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>  
			html,  
			body {  
				background-color: #efeff4;  
			}  
			p {  
				text-indent: 22px;  
			}  
			span.mui-icon {  
				font-size: 14px;  
				color: #007aff;  
				margin-left: -15px;  
				padding-right: 10px;  
			}  
			  
			.mui-off-canvas-right{  
				color: #fff;  
			}  
			  
			.title{  
			  	margin: 35px 15px 10px;  
			  }  
			  .title+.content{  
			  	margin: 10px 15px 35px;  
			  	color: #bbb;  
			  	text-indent: 1em;  
			  	font-size: 14px;  
			  	line-height: 24px;  
			  }  
		</style>  
	</head>  
  
	<body>  
		<!--侧滑菜单容器-->  
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">  
			<!--菜单部分-->  
			<aside id="offCanvasSide" class="mui-off-canvas-right">  
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">  
					<div class="mui-scroll">  
						<div class="title">侧滑导航</div>  
						<div class="content">  
							这是可拖动式侧滑菜单示例,你可以在这里放置任何内容;关闭侧滑菜单有多种方式:  
							1.在手机屏幕任意位置向右拖动(drag);2.点击本侧滑菜单页之外的任意位置;  
							3.点击如下红色按钮<span class="android-only">;4.Android手机按back键;5.Android手机按menu键  
							</span>。  
							<p style="margin: 10px 15px;">  
								<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>  
							</p>  
							  
						</div>  
						<div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>  
						<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">  
							<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>  
							<li class="mui-table-view-cell">  
								<a class="mui-navigate-right">  
									Item 4  
								</a>  
							</li>  
							<li class="mui-table-view-cell">  
								<a class="mui-navigate-right">  
									Item 5  
								</a>  
							</li>  
							<li class="mui-table-view-cell">  
								<a class="mui-navigate-right">  
								Item 6  
							</a>  
							</li>  
							  
						</ul>  
					</div>  
				</div>  
			</aside>  
			<aside id="offCanvasSide" class="mui-off-canvas-left">  
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">  
					<div class="mui-scroll">  
						<div class="title">侧滑导航</div>  
						<div class="content">  
							这是可拖动式侧滑菜单示例,你可以在这里放置任何内容;关闭侧滑菜单有多种方式:  
							1.在手机屏幕任意位置向左拖动(drag);2.点击本侧滑菜单页之外的任意位置;  
							3.点击如下红色按钮<span class="android-only">;4.Android手机按back键;5.Android手机按menu键  
							</span>。  
							<p style="margin: 10px 15px;">  
								<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>  
							</p>  
							  
						</div>  
						<div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>  
						<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">  
							<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>  
							<li class="mui-table-view-cell">  
								<a class="mui-navigate-right">  
									Item 4  
								</a>  
							</li>  
							<li class="mui-table-view-cell">  
								<a class="mui-navigate-right">  
									Item 5  
								</a>  
							</li>  
							<li class="mui-table-view-cell">  
								<a class="mui-navigate-right">  
									Item 6  
								</a>  
							</li>  
						</ul>  
					</div>  
				</div>  
			</aside>  
			<div class="mui-inner-wrap">  
				<header class="mui-bar mui-bar-nav">  
					<a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>  
					<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>  
					<h1 class="mui-title">左滑导航</h1>  
				</header>  
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">  
					<div class="mui-scroll">  
						<div class="mui-content-padded">  
							<p>这是可拖动式左滑导航示例,主页面和菜单在一个HTML文件中,  
								优点是支持拖动手势(跟手),缺点是不支持菜单内容在多页面的复用;  
								当前页面为主界面,你可以在主界面放置任何内容;  
							打开侧滑菜单有多种方式:  
							1、在当前页面向左拖动;  
							2、点击页面右上角的<span class="mui-icon mui-icon-bars"></span> 图标;  
							3、通过JS API触发(例如点击如下蓝色按钮体验);  
							<span class="android-only">4、Android手机按menu键;</span>  
							</p>  
							<p style="padding: 5px 20px;margin-bottom: 5px;">  
								<button id="offCanvasShow" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 5px 100px;">  
									显示侧滑菜单  
								</button>  
							</p>  
							<p>侧滑菜单的移动动画,支持多种效果,切换如下选项体验不同动画效果:</p>  
							  
						</div>  
						  
						<form class="mui-input-group" style="margin-bottom: 15px;">  
							<div class="mui-input-row mui-radio">  
								<label>主界面移动、菜单不动</label>  
								<input name="style" type="radio" checked="" value="main-move">  
							</div>  
							<div class="mui-input-row mui-radio">  
								<label>主界面不动、菜单移动</label>  
								<input name="style" type="radio" value="menu-move">  
							</div>  
							<div class="mui-input-row mui-radio mui-hidden" id="move-togger">  
								<label>整体移动</label>  
								<input name="style" type="radio" value="all-move">  
							</div>  
						</form>	  
						  
					</div>  
				</div>  
				<!-- off-canvas backdrop -->  
				<div class="mui-off-canvas-backdrop"></div>  
			</div>  
		</div>  
		<script src="../js/mui.min.js"></script>  
		<script src="../js/app.js"></script>  
		<script>  
			mui.init({  
				swipeBack: false,  
			});  
			//侧滑容器父节点  
			var offCanvasWrapper = mui('#offCanvasWrapper');  
			//主界面容器  
			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');  
			//菜单容器  
			var offCanvasSide = document.getElementById("offCanvasSide");  
  
			//Android暂不支持整体移动动画  
			if(!mui.os.android){  
				document.getElementById("move-togger").classList.remove('mui-hidden');  
				var spans = document.querySelectorAll('.android-only');  
				for (var i=0,len=spans.length;i<len;i++) {  
					spans[i].style.display = "none";  
				}  
			}  
			  
			//移动效果是否为整体移动  
			var moveTogether = false;  
			//侧滑容器的class列表,增加.mui-slide-in即可实现菜单移动、主界面不动的效果;  
			var classList = offCanvasWrapper[0].classList;  
			//变换侧滑动画移动效果;  
			mui('.mui-input-group').on('change','input',function () {  
				if(this.checked){  
					switch (this.value){  
						case 'main-move':  
							classList.remove('mui-slide-in');  
							if(moveTogether){  
								//仅主内容滑动时,侧滑菜单在off-canvas-wrap内,和主界面并列  
								offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);  
								moveTogether = false;  
							}  
							break;  
						case 'menu-move':  
							classList.add('mui-slide-in');  
							break;  
						case 'all-move':  
							if(classList.contains('mui-slide-in')){  
								classList.remove('mui-slide-in');  
							}  
							moveTogether = true;  
							//整体滑动时,侧滑菜单在inner-wrap内  
							offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);  
							break;  
					}  
					offCanvasWrapper.offCanvas().refresh();  
				}  
			});  
  
  
			document.getElementById('offCanvasShow').addEventListener('tap', function() {  
				offCanvasWrapper.offCanvas('show');  
			});  
			document.getElementById('offCanvasHide').addEventListener('tap', function() {  
				offCanvasWrapper.offCanvas('close');  
			});  
			//主界面和侧滑菜单界面均支持区域滚动;  
			mui('#offCanvasSideScroll').scroll();  
			mui('#offCanvasContentScroll').scroll();  
  
			 //实现ios平台的侧滑关闭页面;  
			if (mui.os.plus && mui.os.ios) {  
				offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件  
					plus.webview.currentWebview().setStyle({  
						'popGesture': 'none'  
					});  
				});  
				offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件  
					plus.webview.currentWebview().setStyle({  
						'popGesture': 'close'  
					});  
				});  
			}  
		</script>  
	</body>  
</html>
hero

hero (作者)

怎么控制显示哪一个aside呢,当前只能显示mui-off-canvas-right这一个,left这个不显示,怎么做到分开控制显示和关闭呢?

  • z***@163.com

    同问,在一个页面里同时加了左和右两个侧滑,用手势能左右滑动显示了,但是怎么样用按钮进行控制左右显示和隐藏呢,用下面朋友的给菜单设置不同的ID,然后href的方法不行呀


    2016-10-22 09:42

DCloud_UNI_FXY

DCloud_UNI_FXY

给菜单设置不同的id。

<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>

href里边直接#id就可以打开指定菜单。

  • 兔图天下

    指定了href也不可以分别控制显示,这是bug吗?


    2015-03-10 10:25

  • DCloud_UNI_FXY

    嗯。是有个bug.下个版本会修复。

    你可以告知你的QQ。我给你发一个修复后的版本先使用着


    2015-03-10 14:27

  • 兔图天下

    回复 DCloud_UNI_FXY:我的QQ:307285468,谢谢


    2015-03-10 15:20

  • 兔图天下

    回复 DCloud_UNI_FXY:如果使用代码去控制,该怎么写呢


    2015-03-10 15:22

  • DCloud_UNI_FXY

    嗯。你可以直接代码控制

    offCanvasWrapper.offCanvas().show('left') or offCanvasWrapper.offCanvas().show('right');


    2015-03-10 15:39

  • 兔图天下

    回复 DCloud_UNI_FXY:测试了下,用代码可以控制,说明只是href解析的部分由问题,多谢~~


    2015-03-10 15:48

  • binmax

    关闭的另一侧的时候只关闭了遮罩,侧滑菜单未关闭


    2016-11-02 18:34

  • 回复 兔图天下: 请问代码是写在什么位置的


    2019-10-22 15:55

凌凌

凌凌

这个用JS要怎么触发呢

lemongranule

lemongranule

可以的 我都实现了。

  • z***@163.com

    怎么实现的,能分享一下吗,谢谢啦


    2016-10-22 09:43

z***@163.com

z***@163.com

给后来的朋友,这样就可以实现
定义两个按钮:

document.getElementById('showUserName').addEventListener('tap', function() {  
				mui('.mui-off-canvas-wrap').offCanvas().show('left');  
			});  
			document.getElementById('showUserZdy').addEventListener('tap', function() {  
				mui('.mui-off-canvas-wrap').offCanvas().show();  
			});
binmax

binmax

关闭的另一侧的时候只关闭了半透明遮罩,侧滑菜单未关闭

3***@qq.com

3***@qq.com - 111

挖文,有具体的解决方案吗?我试了试不行啊

该问题目前已经被锁定, 无法添加新回复