如何使用移动HTML5前端框架MUI

假设当前图片轮播中有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，代码示例如下：

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类即可，如下：

    
        Item 1
    
    
        Item 2
    
    
        Item 3
    

运行结果如下：

右侧添加数字角标等控件

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

    Item 1 
        1
    
    Item 2 
        2
    
    Item 3 
        3
    

运行结果如下：

（图文列表）

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

    
        
            
            
                幸福
                能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？

            
        
    
    
        
            
            
                木屋
                想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.

            
        
    
    
        
            
            
                CBD
                烤炉模式的城，到黄昏，如同打翻的调色盘一般.

            
        
    

运行结果如下：

看完了这篇文章，相信你对“如何使用移动HTML5前端框架MUI”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！