div模式的侧滑菜单如何禁用手势事件打开侧滑菜单，只禁用打开，不禁用关闭。
另外就是webview模式的侧滑菜单，按照官网这两个页面 offcanvas-drag-right-plus-main.html 和offcanvas-drag-right-plus-menu.html ，我要如何在 offcanvas-drag-right-plus-menu.html 点击然后把值传到 offcanvas-drag-right-plus-main.html 这个页面然后取到这个值执行方法
8***@qq.com
- 发布：2016-07-18 14:13
- 更新：2018-04-27 11:39
- 阅读：5197
最佳回复
Trust - 少说废话
请使用自定义事件来实现页面间传值。自定义事件
见详细代码如下：
首页
<!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" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-bars mui-pull-left" id="side_menu"></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">
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
var main = null;
var menu = null;
var isInTransition = false;
var showMenu = false;
mui.init();
mui.plusReady(function() {
main = plus.webview.currentWebview();
// 预加载侧滑页
setTimeout(function() {
menu = mui.preload({
url: "side.html",
id: "side",
styles: {
left: 0,
width: "70%",
zindex: -1
},
show: {
aniShow: "none"
}
});
}, 200);
// 点击左上角图标展示侧滑窗口
document.getElementById("side_menu").addEventListener("tap", function() {
if(showMenu) {
closeMenu();
} else {
openMenu();
}
});
main.addEventListener("maskClick", closeMenu);
});
// 展示侧滑页
function openMenu() {
if(isInTransition) {
return;
}
if(!showMenu) {
// 侧滑菜单处于隐藏状态，则立即显示出来
isInTransition = true;
menu.setStyle({
mask: "rgba(0,0,0,0)"
}); //menu设置透明遮罩防止点击
menu.show("slide-in-left", 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("slide-in-right");
}, 300);
}
}
// 添加自定义事件
window.addEventListener("show_name", function(event) {
var name = event.detail.name;
document.querySelector(".mui-content").innerHTML = "传过来的名字是：" + name;
closeMenu();
});
</script>
</body>
</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" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">侧滑</h1>
</header>
<div class="mui-content">
我是侧滑页
<button type="button" class="mui-btn mui-btn-blue" id="btn_extras">点我传参过去</button>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init();
mui.plusReady(function() {
document.getElementById("btn_extras").addEventListener("tap", function() {
var main = plus.webview.currentWebview().opener();
mui.fire(main, "show_name", {
name: "小明"
});
});
});
</script>
</body>
</html>请将附件中的文件下载，并加入项目中，真机运行即可看到效果。
8***@qq.com (作者)
还是不行啊，
2016-07-18 14:53
8***@qq.com (作者)
你确定这样可以传？传不了啊
2016-07-18 17:07
Trust
回复 8***@qq.com:你的最终业务场景，就是实现侧滑页面和主页面之间的参数，是这个意思吧。
2016-07-18 17:24
8***@qq.com (作者)
是的，但是我是侧滑的那个页面的列表点击获取到的值，关闭当前侧滑页面，然后主页面获取到这个传过来的值之后执行其他的方法
2016-07-18 18:31
8***@qq.com (作者)
fire的事件真机调试没有触发
2016-07-18 19:05
8***@qq.com (作者)
另外想问下这个在哪配置从侧滑右边划出来
2016-07-19 09:19
Trust
回复 8***@qq.com:请看openMenu中的menu.show()方法的第一个参数。另外参考文档
2016-07-19 10:22
8***@qq.com (作者)
我把show的参数的aniShow.参数改过之后还是不行的啊
2016-07-19 12:21
c***@gmail.com
这个有个BUG，同一个a标签点击过多，就会把左侧直接覆盖
2018-01-22 15:15