MUI以iOS 7為基礎，補充了部分Android特有控件。其實這些控件就是一組CSS樣式+JS交互實現(xiàn)的，它們分別被封裝在mui.css和mui.js文件中。學過CSS的都知道，可以利用CSS樣式的優(yōu)先級重寫已存在的樣式。下面就用這種方法統(tǒng)一設置項目中的MUI導航欄。
原創(chuàng)文章,歡迎轉(zhuǎn)載.轉(zhuǎn)載請注明出處: http://www.itdecent.cn/p/7e27185debac

MUI的導航欄：

為頁面添加MUI導航欄只需要在HTML的body中加入如下代碼：

<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導航欄

重寫MUI導航欄：

下面將導航欄的背景顏色改為淺藍色，底部陰影改為一條深灰色的線，返回按鈕和標題顏色改為白色并調(diào)整大小和字體粗細程度。

首先以更改背景顏色為例：

將當前頁面用Google瀏覽器打開，點擊鼠標右鍵選中檢查會出現(xiàn)如下界面：

谷歌瀏覽器調(diào)試界面

選中導航欄標簽就可以在右下角看到關于導航欄的樣式。這里.mui-bar是一個類選擇器，其中background-color屬性正是導航欄的背景顏色（可以臨時修改一下對應的顏色值，觀察一下左邊導航欄視圖的變化，就可以確定這個顏色值是不是導航欄的背景顏色）。
所以只需要在引入mui.min.css樣式之后，加入下面的樣式：

/*導航欄背景顏色*/
.mui-bar {
    background-color: #20BBEF;
}

接下來可以參考更改導航欄背景顏色的方式修改其他樣式：

如何確定要修改的樣式，可以參考上面的方法，這里直接貼出代碼。

修改返回按鈕的顏色和大?。?/h4>

/*返回按鈕圖標*/
.mui-bar .mui-icon {
    font-size: 30px;
    padding-top: 7px;
    padding-bottom: 13px;
    color: #FFFFFF;
}

修改標題字體顏色和粗細程度：

/*標題*/
.mui-bar .mui-title {
    font-weight: 400;
    color: #FFFFFF;
}

修改導航欄底部陰影：

/*導航欄底部陰影*/
.mui-bar-nav {
    box-shadow: 0px 1px 0px 0px #999999;
}

統(tǒng)一封裝到一個css文件中

• 可以將上面修改導航欄樣式的代碼統(tǒng)一放到一個css文件中，只需要在每個頁面中引入mui.min.css文件之后引入這個文件即可（當然也可以把這些代碼追加到mui.min.css文件末尾，這是因為我們重寫的樣式和MUI的樣式優(yōu)先權重相同，將我們重寫的樣式放在MUI樣式之后就會有更高的優(yōu)先級）。

• 也可以在重寫的樣式前加上header標簽來增加權重，這樣就不需要關心文件引入的先后順序啦。以修改背景顏色為例如下：

  /*導航欄背景顏色*/
  header.mui-bar {
      background-color: #20BBEF;
  }
  

  注意：這里是交集選擇器，header和.mui-bar之間沒有空格！

重寫后的效果：

重寫后導航欄的界面效果如下：

重寫后的MUI導航欄

這里的狀態(tài)欄背景顏色依然是白色，字體顏色依然是黑色。如果想修改可以在App首次進入的頁面中添加如下js代碼：

<script type="text/javascript" charset="utf-8">
    mui.plusReady(function(){
        plus.navigator.setStatusBarStyle("light");
        plus.navigator.setStatusBarBackground("#20BBEF");
    });
</script>

或者使用另一種方式：設置沉浸式狀態(tài)欄。這種方式比較麻煩，不推薦使用，除非你用到了iOS原生側滑返回功能，可以參考下面這兩篇文章（請按順序看）：
MUI-解決iOS原生側滑返回時狀態(tài)欄出現(xiàn)白色條的問題（設置沉浸式狀態(tài)欄）
MUI-設置沉浸式狀態(tài)欄后MUI導航欄的高度問題
解決完狀態(tài)欄后的效果如下：

解決完狀態(tài)欄問題的MUI導航欄