结构模板
这里是示例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>
.
扫一扫
515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
