MUI（2）
本篇博文是继续MUI（1）博文。
上一篇博文小编写了两个页面，一个页面只写了一个头部导航栏，另一个页面写了一个按钮，然后这两个页面进行合并显示，即在头部导航栏页面加载显示另一个页面的按钮。仔细观察上一篇的最后截图效果会发现，在头部导航栏的左上角有一个侧滑图标，本篇博文就是实现一个侧滑菜单效果。
还是继续上一篇博文中应用到的项目，只是在之前项目的基础之上新建了一个页面，index_menu.html页面。
index.html页面源代码如下：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
</head> <body>
<!-- 头部header开始 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-icon-bars mui-pull-left"></a>
<a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>
<h1 class="mui-title">首页</h1>
</header>
<!-- 头部header结束 -->
<script type="text/javascript" charset="utf-8">
mui.init({
subpages: [{
url: "html/index_list.html", //子页面HTML地址，支持本地地址和网络地址
id: "index_list", //子页面标志
styles: {
top: '45px', //子页面顶部位置，mui标题栏默认高度为45px
bottom: '0px' //子页面底部位置，默认为0px，可不定义
}
}]
});
var menu = null,
main = null,
showMenu = false;
mui.plusReady(function() {
/*plus.screen.lockOrientation("portrait-primary");//仅仅支持竖屏显示*/
main = plus.webview.currentWebview();
main.addEventListener('maskClick', closeMenu);
//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面
setTimeout(function() {
menu = mui.preload({
id: 'index_menu',
url: 'html/index_menu.html',
styles: {
left: '0px',
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: '0px',
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();
}
});
/*主页面向右滑动,若菜单未显示,则显示菜单,否则不做任何操作*/
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();
}
}
/*首页返回按键处理,若侧滑菜单显示,则关闭侧滑菜单;否则,执行mui框架默认的关闭首页功能*/
var _back = mui.back;
mui.back = function() {
if(showMenu) {
closeMenu();
} else {
_back();
}
}
</script>
</body> </html>
上面的代码第35行的作用是实现仅仅支持竖屏显示，但是小编屏蔽了这一行代码，经过测试Android4.2.2系统版本支持横屏显示和竖屏显示，但是Android4.4.2不支持横屏显示，其他机型情况尚未测试，实际效果尚不明确。
关于mui.plusReady方法官方文档中这样说明：（官方文档地址：http://dev.dcloud.net.cn/mui/window/）
关于plus.webview.currentWebview官方文档中这样说明：（官方文档地址：http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.currentWebview）
关于opener官方文档中这样说明：（官方文档地址：http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.opener）
关于mui.preload官方文档中这样说明：（官方文档地址：http://dev.dcloud.net.cn/mui/window/#preload）
遮罩蒙版官方文档中这样说明：（官方文档地址：http://dev.dcloud.net.cn/mui/ui/#mask）
由于ios系统没有和Android手机一样的菜单和返回按键所以要特别注意这一点。
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" />
<style type="text/css">
body,
.mui-content {
background-color: #333;
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 class="mui-content">
<div class="title">侧滑导航</div>
<div class="content">
这个页面是侧滑导航页面，是单独的一个页面，作为侧滑页面出现。关闭这个侧滑菜单的方式：1.点击这个侧滑菜单页面之外的任意位置；2.点击下面这个红色按钮<span id="android-only">；3.Android手机按back键;4.Android手机按menu键</span>。
</div>
<p style="margin: 10px 15px;">
<button id="close-btn" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
</p>
</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init();//初始化
var aniShow = null;
/*因为back按键和menu按键在ios平台不存在，所以ios平台下面需要隐藏，避免尴尬症。*/
if(!mui.os.android) {
var span = document.getElementById("android-only");
if(span) {
span.style.display = "none";
}
aniShow = "pop-in";//页面显示动画
}
/*关闭侧滑菜单*/
function close() {
mui.fire(mui.currentWebview.opener(), "menu:close");
}
/*点击"关闭侧滑菜单"按钮处理逻辑*/
document.getElementById("close-btn").addEventListener('tap', close);
/*在Android4.4.2中的swipe事件,需要preventDefault一下,否则触发不正常*/
window.addEventListener('dragstart', function(e) {
mui.gestures.touch.lockDirection = true; //锁定方向
mui.gestures.touch.startDirection = e.detail.direction;
});
window.addEventListener('swipe', function(e) {
if(!mui.isScrolling) {
e.detail.gesture.preventDefault();
}
});
//监听左滑事件，若菜单已展开，左滑要关闭菜单
window.addEventListener('swipeleft', function(e) {
if(Math.abs(e.detail.angle) > 170) {
close();
}
});
</script>
</body> </html>
科普事件管理知识，官方文档这样说明：（官方文档地址：http://dev.dcloud.net.cn/mui/event/#）下图仅为手势事件和自定义事件：
这篇博文不是最终形态，后期会修改完善。以上代码测试机型：Android4.2.2版本。因为涉及到HTML5所以电脑上面浏览器不支持，当然了Android模拟器没有测试过，理论上可行。下面是手机测试截图：
声明一点：截图中的字体在手机端显示是根据手机系统设置走的，所以字体显示和电脑上面设置的默认字体不太一样，小编手机显示字体类型不是手机系统默认字体类型，小编进行了个性化字体类型设置而已。
还是强调一点，这篇博文不是最终版本，后期会修改完善。看官方文档是个好习惯哦！
转载请注明出处，谢谢。
MUI（2）的更多相关文章
- MUI（3）
本篇博文是继续上篇博文MUI(2).上面这幅图是博文MUI(1)中实现的效果,在博文MUI(1)中提到了2个页面,一个页面是index.html,另一个页面是index_list.html页面.上面这 ...
- MUI（5）
今天实现9宫格菜单.先上效果图: 就是这个效果咯,界面不太美观,底部导航栏是为了苹果用户没有返回按键设计的,只是为了方便演示而已,没有做过多的处理.首先先说一下这个底部导航栏如何实现,这个底部导航栏小 ...
- MUI（1）
今天小编用HBuilder+MUI开发移动APP,不用Android原生也不用IOS原生,仅仅用HTML5+MUI.小编也是初学者所以如有不准确的地方望大家指出帮助小编改正,同时也可以促进大家的深入学 ...
- MUI（4）
今天感觉无聊,想听一首音乐.没有添加其他页面,只是在index_list.html页面进行代码添加而已. <!doctype html> <html> <head> ...
- mui开发app前言（一）
dcloud mui开发app前言 大一那会就听说html5快要发布了,前景无量,厉害到能写操作系统==|||(什么???蛤?) 似乎html5标准还没正式发布那会,使用hybrid模式开发app已经 ...
- 基于Html5 Plus + Vue + Mui 移动App 开发（二）
基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1.下拉刷新.上拉获取更多功能 ...
- MUI学习03-滚动图（幻灯片）及菜单项（九宫格）
<!--标准mui.css-->引入CSS:<link rel="stylesheet" href="../css/mui.min.css"& ...
- mui框架（三）
1.Ajax-get请求 // get测试请求地址 http://test.dongyixueyuan.com/link_app/get?state=index&num=0 mui.get(' ...
- Html5+Mui前端框架,开发记录（三）：七牛云 上传图片
1.Html界面: <div id="container"> <label>凭证:</label> <div id="uploa ...
随机推荐
- lua的table表处理 及注意事项
lua,一款很轻量级很nice很强大的脚本语言,做为lua中使用最为频繁的table表,在使用之时还是有颇多的好处与坑的: 下面是大牛 云风的一片关于lua table的blog,可使得对lua ta ...
- 学习ASP.NET MVC(三)——我的第一个ASP.NET MVC 视图
今天我将对前一篇文章中的示例进行修改,前一篇文章中并没有用到视图,这次将用到视图.对于前一个示例中的HelloWorldController类进行修改,使用视图模板文件生成HTML响应给浏览器. 一. ...
- javascript_core_07之错误处理、函数作用域
1.错误处理:保证程序发生错误时,不会被强制退出: ①处理方式:try{可能出错的正常语句:}catch(err){只有出现错误时才执行的错误处理代码:}finally{无论是否出错都必须执行的代码: ...
- 理解与模拟一个简单web服务器
先简单说下几个概念,根据自己的理解,不正确请见谅. web服务器 首先要知道什么是web服务器,简单说web服务器就是可以使用HTTP传输协议与客户端进行通信的服务器.最初的web服务器只能用来处理静 ...
- Unity 产生各不相同的随机数
1. 网上很多方法都说用时间种子来解决,但是在极短的时间内,这种方法没效 Random r = new Random(DateTime.Now.Millisecond); Random Counter ...
- CSS滚动条
× 目录 [1]条件 [2]默认 [3]尺寸[4]兼容[5]自定义 前面的话 滚动条在网页中经常见到,却并没有受到足够的重视.只有当因为滚动条的问题需要处理兼容性时,才进行调试操作.本文将就滚动条的常 ...
- hdu4751Divide Groups（dfs枚举完全图集合或者bfs染色）
/************************************************************************* > File Name: j.cpp > ...
- PHP的学习--连接MySQL的三种方式
记录一下PHP连接MySQL的三种方式. 先mock一下数据,可以执行一下sql. /*创建数据库*/ CREATE DATABASE IF NOT EXISTS `test`; /*选择数据库*/ ...
- 包管理器Bower
今天自己用Angular写东西的时候,下载了Angular-seed项目,发现需要用到bower,之前也使用过,没有仔细了解,今天趁机了解到一些. bower的官网地址: http://bower.i ...
- ADO.NET基础03
数据库和VS的连接,实现数据的同步,让用户的一切信息都可以在数据库中留下记录. ADO.NET基础 它是连接所有数据库的一种特殊的技术,提供对不同的数据库统一操作接口. 在VS中也可以添加数 ...