鑑於之前的許多前端框架（特別是響應式佈局的框架），UI控制看起來太像網頁，沒有原生感覺，因此追求原生UI也是MUI的重要目標。 MUI以iOS平台UI為基礎，補充部分Android平台特有的UI控制。 MUI主要有三種意義:一、一種單獨發行的電腦作業系統Windows的多語言版本;二、世界上最權威的Halal認證的官方機構;三、在行動通訊技術中的專有名詞。
一、 使用該框架之前的準備工作1. 新建含mui的HTML文件
在Hbuilder中，新建HTML文件，選擇包含mui的HTML模板，可以快速產生mui頁面模板，該模板預設處理了mui的js、css資源參考。
2.輸入mheader
頂部標題列是每個頁面都必需的內容，在Hbuilder中輸入mheader，可以快速產生頂部導覽列。
3.輸入mbody
除頂部導覽、底部選項卡兩個控制項之外，其它控制項都建議放在.mui-content控制項內，在Hbuilder中輸入mbody，可快速產生包含.mui-content的程式碼區塊。
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>
假設目前圖片輪播有1、2、3、4四張圖片，從第1張圖片起，依序向左滑動切換圖片，切換到第4張圖片時，繼續向左滑動，接下來會有兩種效果：
當顯示第1張圖片時，繼續右滑是否顯示第4張圖片，是同樣問題；這個問題的實作需要透過.mui-slider-loop類別及DOM節點來控制；
若要支援循環，則需要在.mui-slider-group節點上增加.mui-slider-loop類，同時需要重複增加2張圖片，圖片順序變為：4、1、2、3、4、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官網查看。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。