MUI（3）

 1 <script type="text/javascript" charset="utf-8">
 2 mui.init({
 3                 subpages: [{
 4                     url: "html/index_list.html", //子页面HTML地址，支持本地地址和网络地址
 5                     id: "index_list", //子页面标志
 6                     styles: {
 7                         top: ‘45px‘, //子页面顶部位置，mui标题栏默认高度为45px
 8                         bottom: ‘0px‘ //子页面底部位置，默认为0px，可不定义
 9                     }
10                 }]
11             });
12 </script>

 1 mui.init({
 2     subpages:[{
 3       url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址
 4       id:your-subpage-id,//子页面标志
 5       styles:{
 6         top:subpage-top-position,//子页面顶部位置
 7         bottom:subpage-bottom-position,//子页面底部位置
 8         width:subpage-width,//子页面宽度，默认为100%
 9         height:subpage-height,//子页面高度，默认为100%
10         ......
11       },
12       extras:{}//额外扩展参数
13     }]
14   });

1 <!-- 头部header开始 -->
2 <header class="mui-bar mui-bar-nav">
3     <a class="mui-icon mui-icon-bars mui-pull-left"></a>
4     <a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a>
5     <h1 class="mui-title">首页</h1>
6 </header>
7 <!-- 头部header结束 -->

1 <div class="mui-content">
2     <div class="title">侧滑导航</div>
3     <div class="content">
4         这个页面是侧滑导航页面，是单独的一个页面，作为侧滑页面出现。关闭这个侧滑菜单的方式：1.点击这个侧滑菜单页面之外的任意位置；2.点击下面这个红色按钮<span id="android-only">；3.Android手机按back键;4.Android手机按menu键</span>。
5     </div>
6     <p style="margin: 10px 15px;">
7         <button id="close-btn" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
8     </p>
9 </div>

 1 mui.init();//初始化
 2 var aniShow = null;
 3 /*因为back按键和menu按键在ios平台不存在，所以ios平台下面需要隐藏，避免尴尬症。*/
 4 if(!mui.os.android) {
 5     var span = document.getElementById("android-only");
 6     if(span) {
 7     span.style.display = "none";
 8     }
 9     aniShow = "pop-in";//页面显示动画
10 }

 1 /*关闭侧滑菜单*/
 2             function close() {
 3                 mui.fire(mui.currentWebview.opener(), "menu:close");
 4             }
 5             /*点击"关闭侧滑菜单"按钮处理逻辑*/
 6             document.getElementById("close-btn").addEventListener(‘tap‘, close);
 7             /*在Android4.4.2中的swipe事件,需要preventDefault一下,否则触发不正常*/
 8             window.addEventListener(‘dragstart‘, function(e) {
 9                 mui.gestures.touch.lockDirection = true; //锁定方向
10                 mui.gestures.touch.startDirection = e.detail.direction;
11             });
12             window.addEventListener(‘swipe‘, function(e) {
13                 if(!mui.isScrolling) {
14                     e.detail.gesture.preventDefault();
15                 }
16             });
17             //监听左滑事件，若菜单已展开，左滑要关闭菜单
18             window.addEventListener(‘swipeleft‘, function(e) {
19                 if(Math.abs(e.detail.angle) > 170) {
20                     close();
21                 }
22             });

 1 var menu = null,
 2                 main = null,
 3                 showMenu = false;
 4             mui.plusReady(function() {
 5                 /*plus.screen.lockOrientation("portrait-primary");//仅仅支持竖屏显示*/
 6                 main = plus.webview.currentWebview();
 7                 main.addEventListener(‘maskClick‘, closeMenu);
 8                 //处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面
 9                 setTimeout(function() {
10                     menu = mui.preload({
11                         id: ‘index_menu‘,
12                         url: ‘html/index_menu.html‘,
13                         styles: {
14                             left: ‘0px‘,
15                             width: ‘70%‘,
16                             zindex: -1
17                         },
18                         show: {
19                             aniShow: ‘none‘
20                         }
21                     });
22                 }, 200);
23             });

 1 var isInTransition = false;
 2             /*显示侧滑菜单*/
 3             function openMenu() {
 4                 if(isInTransition) {
 5                     return;
 6                 }
 7                 if(!showMenu) {
 8                     //侧滑菜单处于隐藏状态，则立即显示处理
 9                     isInTransition = true;
10                     menu.setStyle({
11                         mask: ‘rgba(0,0,0,0)‘
12                     });
13                     //menu设置透明遮罩防止点击
14                     menu.show(‘none‘, 0, function() {
15                         //主窗体开始侧滑并显示遮罩
16                         main.setStyle({
17                             mask: ‘rgba(0,0,0,0.4)‘, //遮罩蒙版
18                             left: ‘70%‘,
19                             transition: { //一组用于定义页面或控件转换效果的属性
20                                 duration: 150
21                             }
22                         });
23                         mui.later(function() {
24                             isInTransition = false;
25                             menu.setStyle({
26                                 mask: ‘none‘
27                             });
28                             //移除menu的mask
29                         }, 160);
30                         showMenu = true;
31                     });
32                 }
33             }