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();
参考文档
| 上一章 | 下一章 |
|---|
网友评论