移動(dòng)HTML5中MUI框架怎么用

這篇文章將為大家詳細(xì)講解有關(guān)移動(dòng)HTML5中MUI框架怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

鑒于之前的很多前端框架（特別是響應(yīng)式布局的框架），UI控件看起來(lái)太像網(wǎng)頁(yè)，沒(méi)有原生感覺(jué)，因此追求原生UI也是MUI的重要目標(biāo)。MUI以iOS平臺(tái)UI為基礎(chǔ)，補(bǔ)充部分Android平臺(tái)特有的UI控件。MUI主要有三種含義:一、一種單獨(dú)發(fā)行的計(jì)算機(jī)操作系統(tǒng)Windows的多語(yǔ)種版本;二、世界上最權(quán)威的Halal認(rèn)證的官方機(jī)構(gòu);三、在移動(dòng)通訊技術(shù)中的專(zhuān)有名詞。

一、 使用該框架之前的準(zhǔn)備工作

1. 新建含mui的HTML文件

在Hbuilder中，新建HTML文件，選擇”含mui的HTML“模板，可以快速生成mui頁(yè)面模板，該模板默認(rèn)處理了mui的js、css資源引用。

2.輸入mheader

頂部標(biāo)題欄是每個(gè)頁(yè)面都必需的內(nèi)容，在Hbuilder中輸入mheader，可以快速生成頂部導(dǎo)航欄。

3.輸入mbody

除頂部導(dǎo)航、底部選項(xiàng)卡兩個(gè)控件之外，其它控件都建議放在.mui-content控件內(nèi)，在Hbuilder中輸入mbody，可快速生成包含.mui-content的代碼塊。

二、UI組件

1.accordion(折疊面板)

折疊面板和二級(jí)列表類(lèi)似，如下：

<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子內(nèi)容</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子內(nèi)容</p>
            </p>
        </li>
    </ul>

2.buttons(按鈕)

普通按鈕

在button節(jié)點(diǎn)上增加.mui-btn類(lèi)，就可以生成默認(rèn)按鈕；如果需要其他顏色的按鈕，則繼續(xù)增加對(duì)應(yīng)class即可，比如.mui-btn-blue即可變成藍(lán)色按鈕

<button type="button" class="mui-btn">默認(rèn)</button>
<button type="button" class="mui-btn mui-btn-primary">藍(lán)色</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>

運(yùn)行之后的效果如下：

若希望無(wú)底色、有邊框的按鈕，僅需增加.mui-btn-outlined類(lèi)即可，代碼如下：

<button type="button" class="mui-btn mui-btn-outlined">默認(rèn)</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">藍(lán)色</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>

運(yùn)行結(jié)果如下：

3.gallery(圖片輪播)

圖片輪播繼承自slide插件，因此其DOM結(jié)構(gòu)、事件均和slide插件相同；

默認(rèn)不支持循環(huán)播放，DOM結(jié)構(gòu)如下：

<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>

假設(shè)當(dāng)前圖片輪播中有1、2、3、4四張圖片，從第1張圖片起，依次向左滑動(dòng)切換圖片，當(dāng)切換到第4張圖片時(shí)，繼續(xù)向左滑動(dòng)，接下來(lái)會(huì)有兩種效果：

1. 支持循環(huán)：左滑，直接切換到第1張圖片；

2. 不支持循環(huán)：左滑，無(wú)反應(yīng)，繼續(xù)顯示第4張圖片，用戶(hù)若要顯示第1張圖片，必須連續(xù)向右滑動(dòng)切換到第1張圖片；

當(dāng)顯示第1張圖片時(shí)，繼續(xù)右滑是否顯示第4張圖片，是同樣問(wèn)題；這個(gè)問(wèn)題的實(shí)現(xiàn)需要通過(guò).mui-slider-loop類(lèi)及DOM節(jié)點(diǎn)來(lái)控制；

若要支持循環(huán)，則需要在.mui-slider-group節(jié)點(diǎn)上增加.mui-slider-loop類(lèi)，同時(shí)需要重復(fù)增加2張圖片，圖片順序變?yōu)椋?、1、2、3、4、1，代碼示例如下：

<p class="mui-slider">
  <p class="mui-slider-group mui-slider-loop">
    <!--支持循環(huán)，需要重復(fù)圖片節(jié)點(diǎn)-->
    <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>
    <!--支持循環(huán)，需要重復(fù)圖片節(jié)點(diǎn)-->
    <p class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></p>
  </p>
</p>

mui框架內(nèi)置了圖片輪播插件，通過(guò)該插件封裝的JS API，用戶(hù)可以設(shè)定是否自動(dòng)輪播及輪播周期，如下為代碼示例：

//獲得slider插件對(duì)象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:3000//自動(dòng)輪播周期，若為0則不自動(dòng)播放，默認(rèn)為0；
});

因此若希望圖片輪播不要自動(dòng)播放，而是用戶(hù)手動(dòng)滑動(dòng)才切換，只需要通過(guò)如上方法，將interval參數(shù)設(shè)為0即可。

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

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

4.input(輸入表單)

所有包裹在.mui-input-row類(lèi)中的 input、textarea等元素都將被默認(rèn)設(shè)置寬度屬性為width: 100%;。 將 label 元素和上述控件控件包裹在.mui-input-group中可以獲得最好的排列。

（密碼輸入框右側(cè)還自帶了一個(gè)眼睛圖標(biāo)呢，我覺(jué)得特別好用）

代碼如下：

<form class="mui-input-group">
    <p class="mui-input-row">
        <label>用戶(hù)名</label>
    <input type="text" class="mui-input-clear" placeholder="請(qǐng)輸入用戶(hù)名">
    </p>
    <p class="mui-input-row">
        <label>密碼</label>
        <input type="password" class="mui-input-password" placeholder="請(qǐng)輸入密碼">
    </p>
</form>

mui目前還提供了幾個(gè)輸入增強(qiáng)功能：快速刪除、語(yǔ)音輸入*5+ only和密碼框顯示隱藏密碼。

1)快速刪除：只需要在input控件上添加.mui-input-clear類(lèi)，當(dāng)input 控件中有內(nèi)容時(shí)，右側(cè)會(huì)有一個(gè)刪除圖標(biāo)，點(diǎn)擊會(huì)清空當(dāng)前input的內(nèi)容

代碼如下：

<form class="mui-input-group">
    <p class="mui-input-row">
        <label>快速刪除</label>
        <input type="text" class="mui-input-clear" placeholder="請(qǐng)輸入內(nèi)容">
    </p>
</form>

2)搜索框：在.mui-input-row同級(jí)添加.mui-input-search類(lèi)，就可以使用search控件

代碼如下：

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

3)語(yǔ)音輸入*5+ only：為了方便快速輸入，mui集成了HTML5+的語(yǔ)音輸入，只需要在對(duì)應(yīng)input控件上添加.mui-input-speech類(lèi)，就可以在5+環(huán)境下使用語(yǔ)音輸入

4)密碼框：給input元素添加.mui-input-password類(lèi)即可使用

代碼如下：

<form class="mui-input-group">
    <p class="mui-input-row">
        <label>密碼框</label>
        <input type="password" class="mui-input-password" placeholder="請(qǐng)輸入密碼">
    </p>
</form>

5.list(列表)

mui封裝的列表組件是比較簡(jiǎn)單也很好用的。只需要在ul節(jié)點(diǎn)上添加.mui-table-view類(lèi)、在li節(jié)點(diǎn)上添加.mui-table-view-cell類(lèi)即可

<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>

運(yùn)行結(jié)果如下圖：

自定義列表高亮顏色

點(diǎn)擊列表，對(duì)應(yīng)列表項(xiàng)顯示灰色高亮，若想自定義高亮顏色，只需要重寫(xiě).mui-table-view-cell.mui-active即可，如下：

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

右側(cè)添加導(dǎo)航箭頭

若右側(cè)需要增加導(dǎo)航箭頭，變成導(dǎo)航鏈接，則只需在li節(jié)點(diǎn)下增加a子節(jié)點(diǎn)，并為該a節(jié)點(diǎn)增加.mui-navigate-right類(lèi)即可，如下：

<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>

運(yùn)行結(jié)果如下：

右側(cè)添加數(shù)字角標(biāo)等控件

mui支持將數(shù)字角標(biāo)、按鈕、開(kāi)關(guān)等控件放在列表中；mui默認(rèn)將數(shù)字角標(biāo)放在列表右側(cè)顯示，代碼如下：

<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>

運(yùn)行結(jié)果如下：

（圖文列表）

圖文列表繼承自列表組件，主要添加了.mui-media、.mui-media-object、.mui-media-body、.mui-pull-left/right幾個(gè)類(lèi)，如下為示例代碼

<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'>能和心愛(ài)的人一起睡覺(jué)，是件幸福的事情；可是，打呼嚕怎么辦？</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'>烤爐模式的城，到黃昏，如同打翻的調(diào)色盤(pán)一般.</p>
            </p>
        </a>
    </li>
</ul>

運(yùn)行結(jié)果如下：

結(jié)束語(yǔ)：mui框架使用起來(lái)確實(shí)很方便，它還有很多控件供我們使用，具體可在mui官網(wǎng)查看。

以上就是移動(dòng)HTML5中MUI框架的使用方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！

關(guān)于“移動(dòng)HTML5中MUI框架怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。