首頁 >web前端 >H5教程 >在行動HTML5中MUI框架的使用方法

在行動HTML5中MUI框架的使用方法

小云云
小云云原創
2017-12-22 15:16:199689瀏覽

鑑於之前的許多前端框架(特別是響應式佈局的框架),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. 支援循環:左滑,直接切換到第1張圖片;

  2. # #不支援循環:左滑,無反應,繼續顯示第4張圖片,用戶若要顯示第1張圖片,必須連續向右滑動切換到第1張圖片;

# #當第1張圖片顯示時,繼續右滑是否顯示第4張圖片,是同樣問題;這個問題的實作需要透過.mui-slider-loop類別及DOM節點來控制;

若要支援循環,則需要在.mui-slider-group節點上增加.mui-slider-loop類,同時需要重複增加2張圖片,圖片順序變為:4、1、2、3、4、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=&#39;mui-ellipsis&#39;>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</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=&#39;mui-ellipsis&#39;>想要这样一间小木屋,夏天挫冰吃瓜,冬天围炉取暖.</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=&#39;mui-ellipsis&#39;>烤炉模式的城,到黄昏,如同打翻的调色盘一般.</p>
            </p>
        </a>
    </li>
</ul>

运行结果如下:

结束语:mui框架使用起来确实很方便,它还有很多控件供我们使用,具体可在mui官网查看。

相关推荐:

MUI顶部选项卡的用法

比较总结mui页面跳转方式之间的差异

MUI实现上拉加载和下拉刷新的实例分享

以上是在行動HTML5中MUI框架的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn