本篇博文是继续MUI(1)博文,本篇博文是延续MUI(1)博文

图片 1

 科学普及事件管理文化,官方文书档案那样表明:(官方文书档案地址:http://dev.dcloud.net.cn/mui/event/\#)下图仅为手势事件和自定义事件:
图片 2

 科学普及事件管理知识,官方文书档案那样表达:(官方文书档案地址:http://dev.dcloud.net.cn/mui/event/\#)下图仅为手势事件和自定义事件:
图片 3

图片 4

遮罩蒙版官方文书档案中那样表明:(官方文书档案地址:http://dev.dcloud.net.cn/mui/ui/#mask
图片 5

图片 6

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="utf-8">
  6         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7         <title></title>
  8         <script src="js/mui.min.js"></script>
  9         <link href="css/mui.min.css" rel="stylesheet" />
 10     </head>
 11 
 12     <body>
 13         <!-- 头部header开始 -->
 14         <header class="mui-bar mui-bar-nav">
 15             <a class="mui-icon mui-icon-bars mui-pull-left"></a>
 16             <a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>
 17             <h1 class="mui-title">首页</h1>
 18         </header>
 19         <!-- 头部header结束 -->
 20         <script type="text/javascript" charset="utf-8">
 21             mui.init({
 22                 subpages: [{
 23                     url: "html/index_list.html", //子页面HTML地址,支持本地地址和网络地址
 24                     id: "index_list", //子页面标志
 25                     styles: {
 26                         top: '45px', //子页面顶部位置,mui标题栏默认高度为45px
 27                         bottom: '0px' //子页面底部位置,默认为0px,可不定义
 28                     }
 29                 }]
 30             });
 31             var menu = null,
 32                 main = null,
 33                 showMenu = false;
 34             mui.plusReady(function() {
 35                 /*plus.screen.lockOrientation("portrait-primary");//仅仅支持竖屏显示*/
 36                 main = plus.webview.currentWebview();
 37                 main.addEventListener('maskClick', closeMenu);
 38                 //处理侧滑导航,为了避免和子页面初始化等竞争资源,延迟加载侧滑页面
 39                 setTimeout(function() {
 40                     menu = mui.preload({
 41                         id: 'index_menu',
 42                         url: 'html/index_menu.html',
 43                         styles: {
 44                             left: '0px',
 45                             width: '70%',
 46                             zindex: -1
 47                         },
 48                         show: {
 49                             aniShow: 'none'
 50                         }
 51                     });
 52                 }, 200);
 53             });
 54             var isInTransition = false;
 55             /*显示侧滑菜单*/
 56             function openMenu() {
 57                 if(isInTransition) {
 58                     return;
 59                 }
 60                 if(!showMenu) {
 61                     //侧滑菜单处于隐藏状态,则立即显示处理
 62                     isInTransition = true;
 63                     menu.setStyle({
 64                         mask: 'rgba(0,0,0,0)'
 65                     });
 66                     //menu设置透明遮罩防止点击
 67                     menu.show('none', 0, function() {
 68                         //主窗体开始侧滑并显示遮罩
 69                         main.setStyle({
 70                             mask: 'rgba(0,0,0,0.4)', //遮罩蒙版
 71                             left: '70%',
 72                             transition: { //一组用于定义页面或控件转换效果的属性
 73                                 duration: 150
 74                             }
 75                         });
 76                         mui.later(function() {
 77                             isInTransition = false;
 78                             menu.setStyle({
 79                                 mask: 'none'
 80                             });
 81                             //移除menu的mask
 82                         }, 160);
 83                         showMenu = true;
 84                     });
 85                 }
 86             }
 87             /*关闭菜单*/
 88             function closeMenu() {
 89                 if(isInTransition) {
 90                     return;
 91                 }
 92                 if(showMenu) {
 93                     //关闭遮罩
 94                     //主窗体开始侧滑
 95                     isInTransition = true;
 96                     main.setStyle({
 97                         mask: 'none',
 98                         left: '0px',
 99                         transition: {
100                             duration: 200
101                         }
102                     });
103                     showMenu = false;
104                     //等动画结束后,隐藏菜单webview,节省资源
105                     mui.later(function() {
106                         isInTransition = false;
107                         menu.hide();
108                     }, 300);
109                 }
110             }
111             /*点击左上角侧滑图标,打开侧滑菜单*/
112             document.querySelector('.mui-icon-bars').addEventListener('tap', function(e) {
113                 if(showMenu) {
114                     closeMenu();
115                 } else {
116                     openMenu();
117                 }
118             });
119             /*主页面向右滑动,若菜单未显示,则显示菜单,否则不做任何操作*/
120             window.addEventListener('swiperight', openMenu);
121             /*主界面向左滑动,若菜单已显示,则关闭菜单,否则,不做任何操作*/
122             window.addEventListener('swipeleft', closeMenu);
123             /*侧滑菜单触发关闭命令*/
124             window.addEventListener('menu:close', closeMenu);
125             window.addEventListener('menu:open', openMenu);
126             /*重写 mui.menu方法,Android版本的menu按键按下可以自动、关闭侧滑菜单*/
127             mui.menu = function() {
128                     if(showMenu) {
129                         closeMenu();
130                     } else {
131                         openMenu();
132                     }
133                 }
134                 /*首页返回按键处理,若侧滑菜单显示,则关闭侧滑菜单;否则,执行mui框架默认的关闭首页功能*/
135             var _back = mui.back;
136             mui.back = function() {
137                 if(showMenu) {
138                     closeMenu();
139                 } else {
140                     _back();
141                 }
142             }
143         </script>
144     </body>
145 
146 </html>
 1 <!doctype html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 8         <link href="../css/mui.min.css" rel="stylesheet" />
 9         <style type="text/css">
10             body,
11             .mui-content {
12                 background-color: #333;
13                 color: #fff;
14             }
15             
16             .title {
17                 margin: 35px 15px 10px;
18             }
19             
20             .title+.content {
21                 margin: 10px 15px 35px;
22                 color: #bbb;
23                 text-indent: 1em;
24                 font-size: 14px;
25                 line-height: 24px;
26             }
27         </style>
28     </head>
29 
30     <body>
31         <div class="mui-content">
32             <div class="title">侧滑导航</div>
33             <div class="content">
34                 这个页面是侧滑导航页面,是单独的一个页面,作为侧滑页面出现。关闭这个侧滑菜单的方式:1.点击这个侧滑菜单页面之外的任意位置;2.点击下面这个红色按钮;3.Android手机按back键;4.Android手机按menu键。
35             </div>
36             <p style="margin: 10px 15px;">
37                 <button id="close-btn" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
38             </p>
39         </div>
40         <script src="../js/mui.min.js"></script>
41         <script type="text/javascript">
42             mui.init();//初始化
43             var aniShow = null;
44             /*因为back按键和menu按键在ios平台不存在,所以ios平台下面需要隐藏,避免尴尬症。*/
45             if(!mui.os.android) {
46                 var span = document.getElementById("android-only");
47                 if(span) {
48                     span.style.display = "none";
49                 }
50                 aniShow = "pop-in";//页面显示动画
51             }
52             /*关闭侧滑菜单*/
53             function close() {
54                 mui.fire(mui.currentWebview.opener(), "menu:close");
55             }
56             /*点击"关闭侧滑菜单"按钮处理逻辑*/
57             document.getElementById("close-btn").addEventListener('tap', close);
58             /*在Android4.4.2中的swipe事件,需要preventDefault一下,否则触发不正常*/
59             window.addEventListener('dragstart', function(e) {
60                 mui.gestures.touch.lockDirection = true; //锁定方向
61                 mui.gestures.touch.startDirection = e.detail.direction;
62             });
63             window.addEventListener('swipe', function(e) {
64                 if(!mui.isScrolling) {
65                     e.detail.gesture.preventDefault();
66                 }
67             });
68             //监听左滑事件,若菜单已展开,左滑要关闭菜单
69             window.addEventListener('swipeleft', function(e) {
70                 if(Math.abs(e.detail.angle) > 170) {
71                     close();
72                 }
73             });
74         </script>
75     </body>
76 
77 </html>

图片 7

关于plus.webview.currentWebview官方文书档案中如此表明:(官方文书档案地址:http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.currentWebview
图片 8

出于ios系统绝非和Android手提式无线电话机一样的菜系和再次来到按键所以要尤其注意那点。

图片 9

本篇博文是后续MUI(1)博文。
  上一篇博文笔者写了三个页面,二个页面只写了三个头顶导航栏,另1个页面写了多少个按钮,然后那五个页面实行联合展现,即在头顶导航栏页面加载展现另三个页面包车型客车按钮。仔细阅览上一篇的终极截图效果会发现,在头顶导航栏的左上角有一个侧滑图标,本篇博文就是兑现三个侧滑菜单功效。
  还是持续上一篇博文中采纳到的项目,只是在事先项指标基本功之上新建了八个页面,index_menu.html页面。
index.html页面源代码如下:

index_menu.html页面源代码如下:

图片 10

本篇博文是后续MUI(1)博文。
  上一篇博文小编写了五个页面,1个页面只写了一个头顶导航栏,另2个页面写了3个按钮,然后这多少个页面实行联合显示,即在头顶导航栏页面加载突显另一个页面包车型客车按钮。仔细察看上一篇的最终截图效果会意识,在头顶导航栏的左上角有八个侧滑图标,本篇博文就是兑现三个侧滑菜单成效。
  还是继续上一篇博文中运用到的花色,只是在以前项目标基本功之上新建了贰个页面,index_menu.html页面。
index.html页面源代码如下:

那篇博文不是最后形象,中期会修改完善。以上代码测试机型:Android4.2.2本子。因为涉嫌到HTML5所以计算机上面浏览器不帮忙,当然了Android模拟器没有测试过,理论上有效性。下边是手提式有线电话机测试截图:
图片 11

 

上面包车型大巴代码第贰5行的功用是落到实处仅仅扶助竖屏展现,然则小编屏蔽了这一行代码,经过测试Android4.2.2体系版本协理横屏突显和竖屏呈现,然则Android4.4.2不援助横屏展现,其余机型意况并未测试,实效尚不分明。
至于mui.plusReady方法官方文档中这样表达:(官方文书档案地址:http://dev.dcloud.net.cn/mui/window/
图片 12

关于mui.preload官方文书档案中如此表明:(官方文书档案地址:http://dev.dcloud.net.cn/mui/window/#preload
图片 13

关于mui.preload官方文书档案中如此表明:(官方文书档案地址:http://dev.dcloud.net.cn/mui/window/#preload
图片 14

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="utf-8">
  6         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7         <title></title>
  8         <script src="js/mui.min.js"></script>
  9         <link href="css/mui.min.css" rel="stylesheet" />
 10     </head>
 11 
 12     <body>
 13         <!-- 头部header开始 -->
 14         <header class="mui-bar mui-bar-nav">
 15             <a class="mui-icon mui-icon-bars mui-pull-left"></a>
 16             <a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>
 17             <h1 class="mui-title">首页</h1>
 18         </header>
 19         <!-- 头部header结束 -->
 20         <script type="text/javascript" charset="utf-8">
 21             mui.init({
 22                 subpages: [{
 23                     url: "html/index_list.html", //子页面HTML地址,支持本地地址和网络地址
 24                     id: "index_list", //子页面标志
 25                     styles: {
 26                         top: '45px', //子页面顶部位置,mui标题栏默认高度为45px
 27                         bottom: '0px' //子页面底部位置,默认为0px,可不定义
 28                     }
 29                 }]
 30             });
 31             var menu = null,
 32                 main = null,
 33                 showMenu = false;
 34             mui.plusReady(function() {
 35                 /*plus.screen.lockOrientation("portrait-primary");//仅仅支持竖屏显示*/
 36                 main = plus.webview.currentWebview();
 37                 main.addEventListener('maskClick', closeMenu);
 38                 //处理侧滑导航,为了避免和子页面初始化等竞争资源,延迟加载侧滑页面
 39                 setTimeout(function() {
 40                     menu = mui.preload({
 41                         id: 'index_menu',
 42                         url: 'html/index_menu.html',
 43                         styles: {
 44                             left: '0px',
 45                             width: '70%',
 46                             zindex: -1
 47                         },
 48                         show: {
 49                             aniShow: 'none'
 50                         }
 51                     });
 52                 }, 200);
 53             });
 54             var isInTransition = false;
 55             /*显示侧滑菜单*/
 56             function openMenu() {
 57                 if(isInTransition) {
 58                     return;
 59                 }
 60                 if(!showMenu) {
 61                     //侧滑菜单处于隐藏状态,则立即显示处理
 62                     isInTransition = true;
 63                     menu.setStyle({
 64                         mask: 'rgba(0,0,0,0)'
 65                     });
 66                     //menu设置透明遮罩防止点击
 67                     menu.show('none', 0, function() {
 68                         //主窗体开始侧滑并显示遮罩
 69                         main.setStyle({
 70                             mask: 'rgba(0,0,0,0.4)', //遮罩蒙版
 71                             left: '70%',
 72                             transition: { //一组用于定义页面或控件转换效果的属性
 73                                 duration: 150
 74                             }
 75                         });
 76                         mui.later(function() {
 77                             isInTransition = false;
 78                             menu.setStyle({
 79                                 mask: 'none'
 80                             });
 81                             //移除menu的mask
 82                         }, 160);
 83                         showMenu = true;
 84                     });
 85                 }
 86             }
 87             /*关闭菜单*/
 88             function closeMenu() {
 89                 if(isInTransition) {
 90                     return;
 91                 }
 92                 if(showMenu) {
 93                     //关闭遮罩
 94                     //主窗体开始侧滑
 95                     isInTransition = true;
 96                     main.setStyle({
 97                         mask: 'none',
 98                         left: '0px',
 99                         transition: {
100                             duration: 200
101                         }
102                     });
103                     showMenu = false;
104                     //等动画结束后,隐藏菜单webview,节省资源
105                     mui.later(function() {
106                         isInTransition = false;
107                         menu.hide();
108                     }, 300);
109                 }
110             }
111             /*点击左上角侧滑图标,打开侧滑菜单*/
112             document.querySelector('.mui-icon-bars').addEventListener('tap', function(e) {
113                 if(showMenu) {
114                     closeMenu();
115                 } else {
116                     openMenu();
117                 }
118             });
119             /*主页面向右滑动,若菜单未显示,则显示菜单,否则不做任何操作*/
120             window.addEventListener('swiperight', openMenu);
121             /*主界面向左滑动,若菜单已显示,则关闭菜单,否则,不做任何操作*/
122             window.addEventListener('swipeleft', closeMenu);
123             /*侧滑菜单触发关闭命令*/
124             window.addEventListener('menu:close', closeMenu);
125             window.addEventListener('menu:open', openMenu);
126             /*重写 mui.menu方法,Android版本的menu按键按下可以自动、关闭侧滑菜单*/
127             mui.menu = function() {
128                     if(showMenu) {
129                         closeMenu();
130                     } else {
131                         openMenu();
132                     }
133                 }
134                 /*首页返回按键处理,若侧滑菜单显示,则关闭侧滑菜单;否则,执行mui框架默认的关闭首页功能*/
135             var _back = mui.back;
136             mui.back = function() {
137                 if(showMenu) {
138                     closeMenu();
139                 } else {
140                     _back();
141                 }
142             }
143         </script>
144     </body>
145 
146 </html>

index_menu.html页面源代码如下:

那篇博文不是终极形象,后期会修改完善。以上代码测试机型:Android4.2.2版本。因为关乎到HTML5所以电脑上边浏览器不协助,当然了Android模拟器没有测试过,理论上有效性。下边是手提式有线电话机测试截图:
图片 15

 1 <!doctype html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 8         <link href="../css/mui.min.css" rel="stylesheet" />
 9         <style type="text/css">
10             body,
11             .mui-content {
12                 background-color: #333;
13                 color: #fff;
14             }
15             
16             .title {
17                 margin: 35px 15px 10px;
18             }
19             
20             .title+.content {
21                 margin: 10px 15px 35px;
22                 color: #bbb;
23                 text-indent: 1em;
24                 font-size: 14px;
25                 line-height: 24px;
26             }
27         </style>
28     </head>
29 
30     <body>
31         <div class="mui-content">
32             <div class="title">侧滑导航</div>
33             <div class="content">
34                 这个页面是侧滑导航页面,是单独的一个页面,作为侧滑页面出现。关闭这个侧滑菜单的方式:1.点击这个侧滑菜单页面之外的任意位置;2.点击下面这个红色按钮;3.Android手机按back键;4.Android手机按menu键。
35             </div>
36             <p style="margin: 10px 15px;">
37                 <button id="close-btn" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
38             </p>
39         </div>
40         <script src="../js/mui.min.js"></script>
41         <script type="text/javascript">
42             mui.init();//初始化
43             var aniShow = null;
44             /*因为back按键和menu按键在ios平台不存在,所以ios平台下面需要隐藏,避免尴尬症。*/
45             if(!mui.os.android) {
46                 var span = document.getElementById("android-only");
47                 if(span) {
48                     span.style.display = "none";
49                 }
50                 aniShow = "pop-in";//页面显示动画
51             }
52             /*关闭侧滑菜单*/
53             function close() {
54                 mui.fire(mui.currentWebview.opener(), "menu:close");
55             }
56             /*点击"关闭侧滑菜单"按钮处理逻辑*/
57             document.getElementById("close-btn").addEventListener('tap', close);
58             /*在Android4.4.2中的swipe事件,需要preventDefault一下,否则触发不正常*/
59             window.addEventListener('dragstart', function(e) {
60                 mui.gestures.touch.lockDirection = true; //锁定方向
61                 mui.gestures.touch.startDirection = e.detail.direction;
62             });
63             window.addEventListener('swipe', function(e) {
64                 if(!mui.isScrolling) {
65                     e.detail.gesture.preventDefault();
66                 }
67             });
68             //监听左滑事件,若菜单已展开,左滑要关闭菜单
69             window.addEventListener('swipeleft', function(e) {
70                 if(Math.abs(e.detail.angle) > 170) {
71                     close();
72                 }
73             });
74         </script>
75     </body>
76 
77 </html>

上边的代码第25行的成效是落到实处仅仅支持竖屏突显,不过作者屏蔽了这一行代码,经过测试Android4.2.2系统版本协助横屏展现和竖屏展现,但是Android4.4.2不帮忙横屏显示,别的机型情状没有测试,实效尚不分明。
关于mui.plusReady方法官方文书档案中那样表明:(官方文书档案地址:http://dev.dcloud.net.cn/mui/window/
图片 16

关于plus.webview.currentWebview官方文书档案中那样表达:(官方文书档案地址:http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.currentWebview
图片 17

关于opener官方文书档案中如此表明:(官方文书档案地址:http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.opener

 图片 18

 图片 19

扬言一点:截图中的字体在堂弟大端浮现是依据手提式有线电话机系统装置走的,所以字体展现和处理器上边安装的暗中认可字体不太雷同,小编手提式有线电话机展现字体类型不是手提式无线电话机系统暗中认可字体类型,我实行了特性化字体类型设置而已。
抑或强调一点,这篇博文不是终极版本,早先时期会修改完善。看官方文书档案是个好习惯哦!
转发请申明出处,多谢。

 

 

声爱他美点:截图中的字体在手机端显示是依据手提式有线电话机系统装置走的,所以字体显示和处理器上面安装的暗中认可字体不太一致,笔者手提式有线电话机显示字体类型不是手提式有线电话机系统暗中同意字体类型,作者进行了特性化字体类型设置而已。
照旧强调一点,那篇博文不是终极版本,前期会修改完善。看官方文书档案是个好习惯哦!
转发请注脚出处,感激。

至于opener官方文书档案中那样表达:(官方文书档案地址:http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.opener

鉴于ios系统并未和Android手机一样的菜单和重临按键所以要尤其注意那或多或少。

 

遮罩蒙版官方文档中那样表明:(官方文档地址:http://dev.dcloud.net.cn/mui/ui/#mask
图片 20

图片 21

图片 22

相关文章