MUI组件（2）

cardview（卡片视图）

<div class="mui-card">
    <!--页眉，放置标题-->
    <div class="mui-card-header mui-card-media">
        <img src="images/logo.png" />
        <div class="mui-media-body">
            MUI新手指南
            <p>发表于 2019-04-14</p>
        </div>
    </div>
    <!--内容区-->
    <div class="mui-card-content">
        <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        折叠面板
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                         按钮
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                         卡片视图
                    </a>
                </li>
            </ul>
    </div>
    <!--页脚，放置补充信息或支持的操作-->
    <div class="mui-card-footer">作者： 丶白小源</div>
</div>

Cardview（卡片视图）

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

checkbox（复选框）

<div class="mui-input-row mui-checkbox ">
    <label>默认复选框</label>
    <input name="Checkbox" type="checkbox" checked>
</div>
<div class="mui-input-row mui-checkbox mui-left">
  <label>复选框居左（需要添加 mui-left 样式）</label>
  <input name="checkbox1" type="checkbox" checked >
</div>
<div class="mui-input-row mui-checkbox mui-disabled">
    <label>复选框禁用</label>
    <input name="checkbox" type="checkbox" disabled="disabled">
</div>

Checkbox（复选框）

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

radio（单选框）

<div class="mui-input-row mui-radio ">
    <label>默认单选框</label>
    <input name="radio" type="radio" checked>
</div>
<div class="mui-input-row mui-radio mui-left">
    <label>单选框居左</label>
    <input name="radio" type="radio" checked>
</div>
<div class="mui-input-row mui-radio mui-disabled">
    <label>禁用单选框</label>
    <input name="radio" type="radio" disabled="disabled">
</div>

Radio（单选框）

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

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

<ul class="mui-table-view mui-table-view-radio">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">北京</a>
    </li>
    <li class="mui-table-view-cell mui-selected">
        <a class="mui-navigate-right">上海</a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">深圳</a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">广东</a>
    </li>
</ul>

列表式单选框

• 列表式单选在切换选中项时会触发 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（滑块）

<div class="mui-input-row mui-input-range">
    <label>滑块</label>
    <input type="range" min="0" max="100" value="50">
</div>

Range（滑块）

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

switch（开关）

<div class="mui-input-row">
    <label>默认开关</label>
    <div class="mui-switch mui-active">
        <div class="mui-switch-handle"></div>
    </div>
</div>
<div class="mui-input-row">
    <label>改变开关颜色</label>
    <div class="mui-switch mui-active mui-switch-blue">
        <div class="mui-switch-handle"></div>
    </div>
</div>
<!--隐藏开关文字提示信息，变成简洁模式-->
<div class="mui-switch mui-switch-mini mui-active">
  <div class="mui-switch-handle"></div>
</div>
<div class="mui-switch mui-switch-mini mui-active mui-switch-blue">
  <div class="mui-switch-handle"></div>
</div>

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会自动识别该容器下是否有进度条控件，若无，则创建。

<div class="mui-progressbar" id="myPro">
    <span></span>
</div>
//需要对进度条控件进行初始化后
mui('#myPro').progressbar({progress: 20}).show();

Progressbar（进度条）

无限循环进度条

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

<div class="mui-progressbar mui-progressbar-infinite" id="myPro">
    <span></span>
</div>
//初始化进度条
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官方文档

上一章	下一章