移動HTML5前端框架—MUI

  前  言

JRedu

      鑑於以前的不少前端框架（特別是響應式佈局的框架），UI控件看起來太像網頁，沒有原生感受，所以追求原生UI也是MUI的重要目標。MUI以iOS平臺UI爲基礎，補充部分Android平臺特有的UI控件。MUI主要有三種含義:1、一種單獨發行的計算機操做系統Windows的多語種版本;2、世界上最權威的Halal認證的官方機構;3、在移動通信技術中的專有名詞。

 

1、 使用該框架以前的準備工做

1. 新建含mui的HTML文件

在Hbuilder中，新建HTML文件，選擇」含mui的HTML「模板，能夠快速生成mui頁面模板，該模板默認處理了mui的js、css資源引用。

2.輸入mheader

頂部標題欄是每一個頁面都必需的內容，在Hbuilder中輸入mheader，能夠快速生成頂部導航欄。

3.輸入mbody

除頂部導航、底部選項卡兩個控件以外，其它控件都建議放在.mui-content控件內，在Hbuilder中輸入mbody，可快速生成包含.mui-content的代碼塊。

 

2、UI組件

1.accordion(摺疊面板)

摺疊面板和二級列表相似，以下：

<ul class="mui-table-view"> 
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#">面板1</a>
            <div class="mui-collapse-content">
                <p>面板1子內容</p>
            </div>
        </li>
    </ul>
<ul class="mui-table-view"> 
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#">面板2</a>
            <div class="mui-collapse-content">
                <p>面板2子內容</p>
            </div>
        </li>
    </ul>

 

2.buttons(按鈕)

普通按鈕

在button節點上增長.mui-btn類，就能夠生成默認按鈕；若是須要其餘顏色的按鈕，則繼續增長對應class便可，好比.mui-btn-blue便可變成藍色按鈕

<button type="button" class="mui-btn">默認</button>
<button type="button" class="mui-btn mui-btn-primary">藍色</button>
<button type="button" class="mui-btn mui-btn-success">綠色</button>
<button type="button" class="mui-btn mui-btn-warning">黃色</button>
<button type="button" class="mui-btn mui-btn-danger">紅色</button>
<button type="button" class="mui-btn mui-btn-royal">紫色</button> 

運行以後的效果以下：

 

若但願無底色、有邊框的按鈕，僅需增長.mui-btn-outlined類便可，代碼以下：

<button type="button" class="mui-btn mui-btn-outlined">默認</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">藍色</button>
<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">綠色</button>
<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黃色</button>
<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">紅色</button>
<button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button> 

運行結果以下：

 

 

3.gallery(圖片輪播)

圖片輪播繼承自slide插件，所以其DOM結構、事件均和slide插件相同；

默認不支持循環播放，DOM結構以下：

<div class="mui-slider">
  <div class="mui-slider-group">
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
  </div>
</div>

假設當前圖片輪播中有一、二、三、4四張圖片，從第1張圖片起，依次向左滑動切換圖片，當切換到第4張圖片時，繼續向左滑動，接下來會有兩種效果：

• 支持循環：左滑，直接切換到第1張圖片；
• 不支持循環：左滑，無反應，繼續顯示第4張圖片，用戶若要顯示第1張圖片，必須連續向右滑動切換到第1張圖片；

當顯示第1張圖片時，繼續右滑是否顯示第4張圖片，是一樣問題；這個問題的實現須要經過.mui-slider-loop類及DOM節點來控制；

 

若要支持循環，則須要在.mui-slider-group節點上增長.mui-slider-loop類，同時須要重複增長2張圖片，圖片順序變爲：四、一、二、三、四、1，代碼示例以下：

<div class="mui-slider">
  <div class="mui-slider-group mui-slider-loop">
    <!--支持循環，須要重複圖片節點-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
    <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
    <!--支持循環，須要重複圖片節點-->
    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
  </div>
</div>

mui框架內置了圖片輪播插件，經過該插件封裝的JS API，用戶能夠設定是否自動輪播及輪播週期，以下爲代碼示例：

//得到slider插件對象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:3000//自動輪播週期，若爲0則不自動播放，默認爲0；
});

所以若但願圖片輪播不要自動播放，而是用戶手動滑動才切換，只須要經過如上方法，將interval參數設爲0便可。

若要跳轉到第x張圖片，則可使用圖片輪播插件的gotoItem方法，例如：

//mui自帶的on事件綁定，只能用事件委派方式
mui(".mui-content").on("tap","#btn",function(){
    gallery.slider().gotoItem(2);//調到第三張圖片，index從0開始
});

4.input(輸入表單)

全部包裹在.mui-input-row 類中的 input、textarea等元素都將被默認設置寬度屬性爲width: 100%; 。 將 label 元素和上述控件控件包裹在.mui-input-group中能夠得到最好的排列。

（密碼輸入框右側還自帶了一個眼睛圖標呢，我以爲特別好用）

 代碼以下：

<form class="mui-input-group">
    <div class="mui-input-row">
        <label>用戶名</label>
    <input type="text" class="mui-input-clear" placeholder="請輸入用戶名">
    </div>
    <div class="mui-input-row">
        <label>密碼</label>
        <input type="password" class="mui-input-password" placeholder="請輸入密碼">
    </div>
</form>

mui目前還提供了幾個輸入加強功能：快速刪除、語音輸入*5+ only和密碼框顯示隱藏密碼。

 1)快速刪除：只須要在input控件上添加.mui-input-clear類，當input 控件中有內容時，右側會有一個刪除圖標，點擊會清空當前input的內容

代碼以下：

<form class="mui-input-group">
    <div class="mui-input-row">
        <label>快速刪除</label>
        <input type="text" class="mui-input-clear" placeholder="請輸入內容">
    </div>
</form>

2)搜索框：在.mui-input-row同級添加.mui-input-search 類，就可使用search控件

代碼以下：

<div class="mui-input-row mui-search">
    <input type="search" class="mui-input-clear" placeholder="">
</div>

3)語音輸入*5+ only：爲了方便快速輸入，mui集成了 HTML5+的語音輸入，只須要在對應input控件上添加.mui-input-speech 類，就能夠在5+環境下使用語音輸入

 

4)密碼框：給input元素添加.mui-input-password類便可使用

代碼以下：

<form class="mui-input-group">
    <div class="mui-input-row">
        <label>密碼框</label>
        <input type="password" class="mui-input-password" placeholder="請輸入密碼">
    </div>
</form>

5.list(列表)

mui封裝的列表組件是比較簡單也很好用的。只須要在ul節點上添加.mui-table-view類、在li節點上添加.mui-table-view-cell類便可

<ul class="mui-table-view">
    <li class="mui-table-view-cell">Item 1</li>
    <li class="mui-table-view-cell">Item 2</li>
    <li class="mui-table-view-cell">Item 3</li>
</ul>

運行結果以下圖：

自定義列表高亮顏色

點擊列表，對應列表項顯示灰色高亮，若想自定義高亮顏色，只須要重寫.mui-table-view-cell.mui-active便可，以下：

 

/*點擊變灰色高亮*/
.mui-table-view-cell.mui-active{
    background-color: gray;
}

右側添加導航箭頭

若右側須要增長導航箭頭，變成導航連接，則只需在li節點下增長a子節點，併爲該a節點增長.mui-navigate-right類便可，以下：

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 1</a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 2</a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">Item 3</a>
    </li>
</ul>

運行結果以下：

右側添加數字角標等控件

mui支持將數字角標、按鈕、開關等控件放在列表中；mui默認將數字角標放在列表右側顯示，代碼以下：

 

<ul class="mui-table-view">
    <li class="mui-table-view-cell">Item 1 
        <span class="mui-badge mui-badge-primary">1</span>
    </li>
    <li class="mui-table-view-cell">Item 2 
        <span class="mui-badge mui-badge-success">2</span>
    </li>
    <li class="mui-table-view-cell">Item 3 
        <span class="mui-badge">3</span>
    </li>
</ul>

運行結果以下：

（圖文列表）

圖文列表繼承自列表組件，主要添加了.mui-media、.mui-media-object、.mui-media-body、.mui-pull-left/right幾個類，以下爲示例代碼

<ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="img/a.jpg">
            <div class="mui-media-body">
                幸福
                <p class='mui-ellipsis'>能和心愛的人一塊兒睡覺，是件幸福的事情；但是，打呼嚕怎麼辦？</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="img/b.jpg">
            <div class="mui-media-body">
                木屋
                <p class='mui-ellipsis'>想要這樣一間小木屋，夏天挫冰吃瓜，冬天圍爐取暖.</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="img/c.jpg">
            <div class="mui-media-body">
                CBD
                <p class='mui-ellipsis'>烤爐模式的城，到黃昏，如同打翻的調色盤通常.</p>
            </div>
        </a>
    </li>
</ul>

運行結果以下：

 結束語：mui框架使用起來確實很方便，它還有不少控件供咱們使用，具體可在mui官網查看。