在行動HTML5中MUI框架的使用方法
- 小云云原創
- 2017-12-22 15:16:199587瀏覽
鑑於之前的許多前端框架（特別是響應式佈局的框架），UI控制看起來太像網頁，沒有原生感覺，因此追求原生UI也是MUI的重要目標。 MUI以iOS平台UI為基礎，補充部分Android平台特有的UI控制。 MUI主要有三種意義:一、一種單獨發行的電腦作業系統Windows的多語言版本;二、世界上最權威的Halal認證的官方機構;三、在行動通訊技術中的專有名詞。本文主要介紹了行動HTML5前端框架—MUI的使用的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考，希望能幫助到大家。
一、 使用該框架之前的準備工作
1. 新建含mui的HTML文件
在Hbuilder中，新建HTML文件，選擇”含mui的HTML“模板，可以快速產生mui頁面模板，該模板預設處理了mui的js、css資源引用。
2.輸入mheader
頂部標題列是每個頁面都必需的內容，在Hbuilder中輸入mheader，可以快速產生頂部導覽列。
3.輸入mbody
除頂部導航、底部選項卡兩個控制項之外，其它控制項都建議放在.mui-content控制項內，在Hbuilder中輸入mbody，可快速產生包含.mui-content的程式碼區塊。
二、UI元件
1.accordion(折疊面板)
#折疊面板和二級清單類似，如下：
<ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板1</a> <p class="mui-collapse-content"> <p>面板1子内容</p> </p> </li> </ul> <ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板2</a> <p class="mui-collapse-content"> <p>面板2子内容</p> </p> </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結構如下：
<p class="mui-slider"> <p class="mui-slider-group"> <p class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></p> <p class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></p> <p class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></p> <p class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></p> </p> </p>
假設目前圖片輪播中有1、2、3、4四張圖片，從第1張圖片起，依序向左滑動切換圖片，當切換到第4張圖片時，繼續向左滑動，接下來會有兩種效果：
支援循環：左滑，直接切換到第1張圖片；
- # #不支援循環：左滑，無反應，繼續顯示第4張圖片，用戶若要顯示第1張圖片，必須連續向右滑動切換到第1張圖片；
<p class="mui-slider"> <p class="mui-slider-group mui-slider-loop"> <!--支持循环，需要重复图片节点--> <p class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></p> <p class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></p> <p class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></p> <p class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></p> <p class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></p> <!--支持循环，需要重复图片节点--> <p class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></p> </p> </p>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"> <p class="mui-input-row"> <label>用户名</label> <input type="text" class="mui-input-clear" placeholder="请输入用户名"> </p> <p class="mui-input-row"> <label>密码</label> <input type="password" class="mui-input-password" placeholder="请输入密码"> </p> </form># ##mui目前也提供了幾個輸入增強功能：快速刪除、語音輸入*5+ only和密碼框顯示隱藏密碼。 ######1)快速刪除：只需要在input控制項上新增.mui-input-clear類，當input 控制項中有內容時，右側會有一個刪除圖標，點擊會清空目前input的內容# ##############程式碼如下：###
<form class="mui-input-group"> <p class="mui-input-row"> <label>快速删除</label> <input type="text" class="mui-input-clear" placeholder="请输入内容"> </p> </form>###2)搜尋框：在.mui-input-row同級新增.mui-input-search類，就可以使用search控制###############程式碼如下：###
<p class="mui-input-row mui-search"> <input type="search" class="mui-input-clear" placeholder=""> </p>###3)語音輸入*5+ only：為了方便快速輸入，mui整合了HTML5+的語音輸入，只需要在對應input控制項上新增.mui-input-speech類，就可以在5+環境下使用語音輸入###
4)密码框：给input元素添加.mui-input-password类即可使用
代码如下：
<form class="mui-input-group"> <p class="mui-input-row"> <label>密码框</label> <input type="password" class="mui-input-password" placeholder="请输入密码"> </p> </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"> <p class="mui-media-body"> 幸福 <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p> </p> </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"> <p class="mui-media-body"> 木屋 <p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p> </p> </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"> <p class="mui-media-body"> CBD <p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p> </p> </a> </li> </ul>
运行结果如下：
结束语：mui框架使用起来确实很方便，它还有很多控件供我们使用，具体可在mui官网查看。
相关推荐：
以上是在行動HTML5中MUI框架的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！