MUI组件（2）

cardview（卡片视图）

    
    

        
        

            MUI新手指南
            
发表于 2019-04-14
        
    
    
    

        

                

                    
                        折叠面板
                    
                
                

                    
                         按钮
                    
                
                

                    
                         卡片视图
                    
                
            
    
    
    
作者： 丶白小源

Cardview（卡片视图）

注：卡片视图主要有页眉、内容区、页脚三部分组成。

checkbox（复选框）

    默认复选框
    


  复选框居左（需要添加 mui-left 样式）
  


    复选框禁用
    

Checkbox（复选框）

注：复选框常用于多选的情况。

radio（单选框）

    默认单选框
    


    单选框居左
    


    禁用单选框
    

Radio（单选框）

注：单选框常用于选择单个目标，一组单选框其 name 属性是相同的。如性别分为男、女，我们从中选择自己性别，要么是男，要么是女。

MUI基于列表控件，提供了列表式单选实现。

    

        北京
    
    

        上海
    
    

        深圳
    
    

        广东
    

列表式单选框

• 列表式单选在切换选中项时会触发 selected 事件，然后进行其他操作。

var list = document.querySelector('.mui-table-view.mui-table-view-radio');
list.addEventListener('selected', function(e) {
    //在事件参数 e.detail.el 中可以获得当前选中的DOM节点信息
    console.log("当前选中的列表为：" + e.detail.el.innerText);
})

选中列表单选获取内容

range（滑块）

    滑块
    

Range（滑块）

注：滑块常用于区间数字选择。

switch（开关）

    默认开关
    

        

    


    改变开关颜色
    

        

    



  



  

Switch（开关）

注：MUI提供的开关控件，可以通过点击或滑动两种手势对开关进行操作。

MUI提供了获取当前开关状态的方法。

var mySwitch = document.getElementById("mySwitch");
mySwitch.addEventListener('tap', function() {
    var isActive = mySwitch.classList.contains("mui-active")
    if(isActive) {
        console.log("打开状态！");
    } else {
        console.log("关闭状态！");
    }
})

点击开关获取状态

progressbar（进度条）

有准确值的进度条

• 有准确值的进度条会显示当前进度正处于整个进度的占比位置，可以用于文件上传，来以此显示文件上传进度。
• 使用进度条控件，需要一个进度条控件容器，MUI会自动识别该容器下是否有进度条控件，若无，则创建。

    

//需要对进度条控件进行初始化后
mui('#myPro').progressbar({progress: 20}).show();

Progressbar（进度条）

无限循环进度条

• 若无法精准提供当前进度，则可以使用无限循环进度条，其类似于等待框。

    

//初始化进度条
mui('#myPro').progressbar().show();

无限循环进度条

关闭进度条

• 使用隐藏进度条的方式达到关闭效果，MUI调用 hide 方法后，会直接删掉对应的DOM节点。若提前创建好DOM节点的进度条，则 hide 无效。

mui("#myPro").progressbar().hide();

页面顶部进度条

• 页面顶部进度条类似浏览器进度条，固定显示在页面顶部（标题栏下方）；若当前页面使用父子双webview模式，子页面没有标题导航组件，则需要通过自定义css样式，重定义顶部进度条的位置。

body>.mui-progressbar{
    top:0
}

• 使用页面顶部进度条时，无需编写DOM结构，使用自动创建方式。

mui('body').progressbar({
    progress: 20
}).show();

参考文档

• MUI官方文档

上一章	下一章