全国服务热线:4008-888-888

技术知识

挪动HTML5前端开发架构—MUI的应用

前 言

鉴于以前的许多前端开发架构(非常是回应式合理布局的架构),UI控制看起来太像网页页面,沒有原生态觉得,因而追求完美原生态UI也是MUI的关键总体目标。MUI以iOS服务平台UI为基本,填补一部分Android服务平台独有的UI控制。MUI关键有3种含意:1、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(折叠面板)

折叠面板和2级目录相近,以下:

<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、44张照片,从第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,编码示比如下:

<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);//调到第3张照片,index从0刚开始
});

4.input(键入表单)

全部包裹在.mui-input-row类中的 input、textarea等元素都将被默认设置设定宽度特性为width: 100%;。 将 label 元素和上述控制控制包裹在.mui-input-group中能够得到最好是的排序。

(登陆密码键入框右边还自带了1个双眼标志呢,我感觉非常功能强大)

编码以下:

<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 控制中有內容时,右边会有1个删掉标志,点一下会清空当今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'>能和深爱的人1起入睡,是件幸福快乐的事儿;但是,打呼噜如何办?</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'>要想这样1间小木制别墅,夏季挫冰吃瓜,冬季围炉供暖.</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'>烤炉方式的城,到傍晚,好似打翻的调色盘1般.</p>
            </div>
        </a>
    </li>
</ul>

运作結果以下:

完毕语:mui架构应用起来的确很便捷,它也有许多控制供大家应用,实际可在mui官方网站查询。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服