MUI（3）

本篇博文是繼續上篇博文MUI（2）。

上面這幅圖是博文MUI（1）中實現的效果，在博文MUI（1）中提到了2個頁面，一個頁面是index.html，另一個頁面是index_list.html頁面。上面這幅圖中紅色框子是index.html頁面，藍色框子是index_list.html頁面。兩個頁面本來是獨立的兩個頁面，但是組合在一起之后就形成了如上面這幅圖所示的效果。在一個頁面中顯示另一個頁面。
　　實現方法很簡單，

<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，可不定義
                    }
                }]
            });
</script>

　　其實index_list.html頁面是index.html頁面的子頁面，官方文檔中說：在mobile app開發過程中，經常遇到卡頭卡尾的頁面，此時若使用局部滾動，在Android手機上會出現滾動不流暢的問題；mui的解決思路是：將需要滾動的區域通過單獨的webview實現，完全使用原生滾動。具體做法是：將目標頁面分解為主頁面和內容頁面，主頁面顯示卡頭卡尾區域，比如頂部導航，底部選項卡等；內容頁顯示具體需要滾動的內容，然后在主頁面中調用mui.init方法初始化內容頁面。
　　官方文檔中的這段說明，通俗來說就是將一個頁面分解出來，比如把頭部導航放在一個頁面上，內容部分放到另一個頁面上面，然后再將這兩個頁面結合在一起。上面官方文檔說明中提到一個名稱webview，關於webview在官方文檔中也有說明：UI模塊管理應用界面，用於操作加載HTML頁面的原生窗口，調用系統原生控件等。由於此模塊功能太多，現已根據功能分拆更新為Key、NativeUI、Navigatori等，並對接口和功能做了一些優化調整，請使用新API。模塊管理應用窗口界面，實現多窗口的邏輯控制管理操作。通過plus.webview可獲取應用界面管理對象。
　　如果暫時沒有聽懂或者不理解什么是webview也沒事，寫的多了就會慢慢理解了，多寫多思考。
　　a.html頁面中顯示b.html頁面，那么在a.html頁面中這么寫即可：

mui.init({
    subpages:[{
      url:your-subpage-url,//子頁面HTML地址，支持本地地址和網絡地址
      id:your-subpage-id,//子頁面標志
      styles:{
        top:subpage-top-position,//子頁面頂部位置
        bottom:subpage-bottom-position,//子頁面底部位置
        width:subpage-width,//子頁面寬度，默認為100%
        height:subpage-height,//子頁面高度，默認為100%
        ......
      },
      extras:{}//額外擴展參數
    }]
  });

首先如上面這串代碼所示，url處寫b頁面地址，id自己定義，默認為b頁面url，下面的styles是b頁面在a頁面中顯示的樣式，比如b頁面顯示在a頁面距離頂部導航欄45px處等等。extras是擴展參數，用不到可以不寫。按照這個格式可以實現在a頁面中顯示b頁面。
頭部導航欄是header，底部選項卡是nav，例如頭部導航欄舉例：

<!-- 頭部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結束 -->

 

這幅圖是博文MUI（2）中實現的效果，博文MUI（2）在博文MUI（1）的基礎之上又添加了一個頁面策划菜單頁面index_menu.html頁面，這幅圖紅色框是index.html頁面，綠色框是index_menu.html頁面。而在綠色框的右側外圍紅色框的右側這部分區域是遮罩，博文MUI（2）中提到的遮罩效果。

<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>

因為蘋果手機不具備安卓手機的返回按鍵和菜單按鍵，所以需要設置當在蘋果手機上面運行時隱藏上面代碼中的第3點和第4點，需要單獨設置樣式和js代碼進行判斷並作出相應措施。
<span id="android-only">；3.Android手機按back鍵;4.Android手機按menu鍵</span>
相應的js代碼：

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();
                }
            });

側滑菜單頁面中有一個按鈕，其id為close-btn，對這個id進行監聽，如果單擊這個按鈕，那么執行關閉側滑菜單命令。
function close() {mui.fire(mui.currentWebview.opener(), "menu:close");}
關於這行代碼乍一看平淡無奇，但是仔細觀察：mui.fire官方文檔中這樣說明：通過mui.fire()方法可觸發目標窗口的自定義事件，格式為：.fire(target, event, data)
target　　Type:WebviewObject需要傳值的目標webview；event　　Type;String自定義事件名稱；data　　Type:JSONjson格式的數據。
官方文檔在這一塊還有一個溫馨提示：

目標webview必須觸發loaded事件后才能使用自定義事件

若新創建一個webview，不等該webview的loaded事件發生，就立即使用webview.evalJS()或mui.fire(webview,'eventName',{})，則可能無效；

currentWebview是獲取當前窗口的webviewObject對象，返回值是：WebviewObject :Webview窗口對象。
Webview窗口對象，用於操作加載HTML頁面的窗口；opener: 獲取當前Webview窗口的創建者。
index.html頁面中采用了plus.webview.currentWebview();創建菜單頁面webview。那么就是返回到index.html頁面，觸發close事件后。
不用擔心后期會再回到這篇博文的，會再次重新解釋的，相信小編。

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);
            });

index.html頁面中通過上面這篇代碼加載了側滑菜單頁面，雖然在開始的時候並沒有顯示出來側滑菜單，但是已經加載了。

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;
                    });
                }
            }

既然已經加載了，那么當我們點擊打開側滑菜單的時候就會很快顯示在我們的眼前。好了上面這串代碼就是實現打開側滑菜單。
什么是mask呢？官方文檔中這樣給我們說明：

遮罩蒙版

在popover、側滑菜單等界面，經常會用到蒙版遮罩；比如popover彈出后，除popover控件外的其它區域都會遮罩一層蒙版，用戶點擊蒙版不會觸發蒙版下方的邏輯，而會關閉popover同時關閉蒙版；再比如側滑菜單界面，菜單划出后，除側滑菜單之外的其它區域都會遮罩一層蒙版，用戶點擊蒙版會關閉側滑菜單同時關閉蒙版。

遮罩蒙版常用的操作包括：創建、顯示、關閉，如下代碼：

var mask = mui.createMask(callback);//callback為用戶點擊蒙版時自動執行的回調； mask.show();//顯示遮罩 mask.close();//關閉遮罩

注意：關閉遮罩僅會關閉，不會銷毀；關閉之后可以再次調用mask.show();打開遮罩；

mui默認的蒙版遮罩使用.mui-backdrop類定義（如下代碼），若需自定義遮罩效果，只需覆蓋定義.mui-backdrop即可；

.mui-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; background-color: rgba(0,0,0,.3); }

還有一個later是什么呢？不要着急，官方文檔中有說明：

結合官方文檔和前兩篇博文提供的源代碼，自己思考一下，敲一敲，試試看。
轉載請注明出處，謝謝。