MUI框架

Hbuilder中敲mheader生成的代碼塊，會自動生成帶有返回導航箭頭的標題欄，點擊返回箭頭可關閉當前頁面，緣由就是由於該返回箭頭包含.mui-action-back類，代碼以下：

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">標題</h1>
</header>

若但願在頂部導航欄以外的其它區域添加關閉頁面的控件，只須要在對應控件上添加.mui-action-back類便可，以下爲一個關閉按鈕示例：

<button type="button" class='mui-btn mui-btn-danger mui-action-back'>關閉</button>

mui框架封裝的頁面右滑關閉功能，默認未啓用，若要使用右滑關閉功能，須要在mui.init();方法中設置swipeBack參數，以下：

mui.init({
    swipeBack:true //啓用右滑關閉功能
});

 mui框架默認會監聽Android手機的back按鍵，而後執行頁面關閉邏輯； 若不但願mui自動處理back按鍵，可經過以下方式關閉mui的back按鍵監聽；

mui.init({
    keyEventBind: {
        backbutton: false  //關閉back按鍵監聽
    }
});

除了如上三種操做外，也能夠直接調用mui.back()方法，執行窗口關閉邏輯；

mui.back()僅處理窗口邏輯，若但願在窗口關閉以前再處理一些其它業務邏輯，則可將業務邏輯抽象成一個具體函數，而後註冊爲mui.init方法的beforeback參數;beforeback的執行邏輯爲：

• 執行beforeback參數對應的函數若返回false，則再也不執行mui.back()方法；
• 不然（返回true或無返回值），繼續執行mui.back()方法；

示例：從列表打開詳情頁面，從詳情頁面再返回後但願刷新列表界面，此時可註冊beforeback參數，而後經過自定義事件通知列表頁面刷新數據，示例代碼以下：

mui.init({
    beforeback: function(){
        //得到列表界面的webview
        var list = plus.webview.getWebviewById('list');
        //觸發列表界面的自定義事件（refresh）,從而進行數據刷新
        mui.fire(list,'refresh');
        //返回true，繼續頁面關閉邏輯
        return true;
    }
});

注意：beforeback的執行返回必須是同步的（阻塞模式），若使用nativeUI這種異步js（非阻塞模式），則可能會出現意想不到的結果；好比：經過plus.nativeUI.confirm()彈出確認框，可能用戶還沒有選擇，頁面已經返回了（beforeback同步執行完畢，無返回值，繼續執行mui.back()方法，nativeUI不會阻塞js進程）：在這種狀況下，若要自定義業務邏輯，就須要複寫mui.back方法了；以下爲一個自定義示例，每次都須要用戶確認後，纔會關閉當前頁面:

//備份mui.back，mui.back已將窗口關閉邏輯封裝的比較完善（預加載及父子窗口），所以最好複用mui.back
var old_back = mui.back;
mui.back = function(){
  var btn = ["肯定","取消"];
  mui.confirm('確認關閉當前窗口？','Hello MUI',btn,function(e){
    if(e.index==0){
        //執行mui封裝好的窗口關閉邏輯；
        old_back();
    }
  });
}