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

小编给大家分享一下如何使用移动HTML5前端框架MUI,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

创新互联主要为客户提供服务项目涵盖了网页视觉设计、VI标志设计、营销推广、网站程序开发、HTML5响应式成都网站建设手机网站制作设计、微商城、网站托管及网站维护、WEB系统开发、域名注册、国内外服务器租用、视频、平面设计、SEO优化排名。设计、前端、后端三个建站步骤的完善服务体系。一人跟踪测试的建站服务标准。已经为效果图设计行业客户提供了网站开发服务。

一、 使用该框架之前的准备工作

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(折叠面板)

折叠面板和二级列表类似,如下:

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

 
        
            面板1
            
                

面板1子内容

            
                                     面板2                              

面板2子内容

            
             

2.buttons(按钮)

普通按钮

在button节点上增加.mui-btn类,就可以生成默认按钮;如果需要其他颜色的按钮,则继续增加对应class即可,比如.mui-btn-blue即可变成蓝色按钮

默认
蓝色
绿色
黄色
红色
紫色

运行之后的效果如下:

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

 若希望无底色、有边框的按钮,仅需增加.mui-btn-outlined类即可,代码如下:

默认
蓝色
绿色
黄色
红色
紫色

运行结果如下:

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

3.gallery(图片轮播)

图片轮播继承自slide插件,因此其DOM结构、事件均和slide插件相同;

默认不支持循环播放,DOM结构如下:


  
    
    
            

假设当前图片轮播中有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中可以获得最好的排列。

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

(密码输入框右侧还自带了一个眼睛图标呢,我觉得特别好用)

代码如下:


    
        
    
    
    
        
        
    

mui目前还提供了几个输入增强功能:快速删除、语音输入*5+ only和密码框显示隐藏密码。

1)快速删除:只需要在input控件上添加.mui-input-clear类,当input 控件中有内容时,右侧会有一个删除图标,点击会清空当前input的内容

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

代码如下:


    
        
        
    

2)搜索框:在.mui-input-row同级添加.mui-input-search类,就可以使用search控件

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

代码如下:


    

3)语音输入*5+ only:为了方便快速输入,mui集成了HTML5+的语音输入,只需要在对应input控件上添加.mui-input-speech类,就可以在5+环境下使用语音输入

 4)密码框:给input元素添加.mui-input-password类即可使用

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

代码如下:


    
        
        
    

5.list(列表)

mui封装的列表组件是比较简单也很好用的。只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可


    Item 1
    Item 2
    Item 3

运行结果如下图:

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

自定义列表高亮颜色

点击列表,对应列表项显示灰色高亮,若想自定义高亮颜色,只需要重写.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
    

运行结果如下:

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

右侧添加数字角标等控件

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


    Item 1 
        1
    
    Item 2 
        2
    
    Item 3 
        3
    

运行结果如下:

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

(图文列表)

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


    
        
            
            
                幸福
                能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?

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

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

                          

运行结果如下:

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

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


分享标题:如何使用移动HTML5前端框架MUI
标题URL:http://azwzsj.com/article/pcojcg.html