挪移HTML5中MUI框架的运用办法--百分百源码网

挪移HTML5中MUI框架的运用办法-

发布时间：08/01 来源：未知浏览：关键词：

鉴于以前的许多前端框架（特殊是相应式布局的框架），UI控件看起来太像网页，没有原生感觉，因而寻求原生UI也是MUI的重要指标。MUI以iOS平台UI为根基，增补局部Android平台特有的UI控件。MUI主要有三种含义:一、一种独自发行的盘算机操纵系统Windows的多语种版本;二、天下上最权威的Halal认证的官方机构;三、在挪移通信技术中的专有名词。本文主要介绍了挪移HTML5前端框架—MUI的运用的相干材料，小编觉得挺不错的，此刻分享给大家，也给大家做个参照，但愿能帮忙到大家。鉴于以前的许多前端框架（特殊是相应式布局的框架），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(折叠面板)

折叠面板和二级列表相似，如下：

2.buttons(按钮)

普通按钮

在button节点上添加.mui-btn类，就可以生成默许按钮；要是需要其他色彩的按钮，则继续添加对应class即可，比方.mui-btn-blue即可酿成蓝色按钮

运转之后的结果如下：

若但愿无底色、有边框的按钮，仅需添加.mui-btn-outlined类即可，代码如下：

运转效果如下：

3.gallery(图片轮播)

图片轮播继承自slide插件，因而其DOM构造、事件均和slide插件雷同；

默许不支撑轮回播放，DOM构造如下：

假如目前图片轮播中有1、2、3、4四张图片，从第1张图片起，顺次向左滑动切换图片，当切换到第4张图片时，继续向左滑动，接下来会有两种结果：

支撑轮回：左滑，直接切换到第1张图片；
不支撑轮回：左滑，无反馈，继续显示第4张图片，会员若要显示第1张图片，必需陆续向右滑动切换到第1张图片；

当显示第1张图片时，继续右滑可否显示第4张图片，是一样题目；这个题目的实现需要通过.mui-slider-loop类及DOM节点来控制；

若要支撑轮回，则需要在.mui-slider-group节点上添加.mui-slider-loop类，同时需要反复添加2张图片，图片次序变为：4、1、2、3、4、1，代码示例如下：

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中可以获得最佳的罗列。

（密码输入框右边还自带了一个眼睛图标呢，我觉得特殊好用）

代码如下：

mui当前还供给了几个输入加强功能：迅速删除、语音输入*5+ only和密码框显示隐蔽密码。

1)迅速删除：只需要在input控件上增加.mui-input-clear类，当input 控件中有内容时，右边会有一个删除图标，点击会清空目前input的内容

代码如下：

2)搜寻框：在.mui-input-row同级增加.mui-input-search类，就可以运用search控件

代码如下：

3)语音输入*5+ only：为了利便迅速输入，mui集成了HTML5+的语音输入，只需要在对应input控件上增加.mui-input-speech类，就可以在5+环境下运用语音输入

4)密码框：给input元素增加.mui-input-password类即可运用

代码如下：

5.list(列表)

mui封装的列表组件是比拼简略也非常不错用的。只需要在ul节点上增加.mui-table-view类、在li节点上增加.mui-table-view-cell类即可


    Item 1
    Item 2
    Item 3

运转效果如下图：

自定义列表高亮色彩

点击列表，对应列表项显示灰色高亮，若想自定义高亮色彩，只需要重写.mui-table-view-cell.mui-active即可，如下：

/*点击变灰色高亮*/
.mui-table-view-cell.mui-active{
    background-color: gray;
}

右边增加导航箭头

若右边需要添加导航箭头，酿成导航链接，则只需在li节点下添加a子节点，并为该a节点添加.mui-navigate-right类即可，如下：

运转效果如下：

右边增加数字角标等控件

mui支撑将数字角标、按钮、开关等控件放在列表中；mui默许将数字角标放在列表右边显示，代码如下：

运转效果如下：

（图文列表）

图文列表继承自列表组件，主要增加了.mui-media、.mui-media-object、.mui-media-body、.mui-pull-left/right几个类，如下为示例代码


    
        
            
            
                幸福
                
能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？
            
        
    
    
        
            
            
                板屋
                
想要这样一间小板屋，炎天挫冰吃瓜，冬天围炉取暖.
            
        
    
    
        
            
            
                CBD
                
烤炉模式的城，到傍晚，犹如打翻的调色盘个别.