十.MUI - progressbar（进度条）、滑块及switch开关

71 阅读 0 评论 47 点赞

我是靠谱客的博主清秀秋天，这篇文章主要介绍十.MUI - progressbar（进度条）、滑块及switch开关，现在分享给大家，希望可以做个参考。

1、有准确值的进度条

有准确值的进度条会显示当前进度正处于整体进度的占比位置，用户可以更直观的预期完成时间；
使用进度条控件，需要一个进度条控件容器，mui会自动识别该容器下是否有进度条控件，若没有，则自动创建。
进度条控件DOM结构：

复制代码

1
2
3
<div id="demo1" class="mui-progressbar">
<span></span>
</div>

初始化:

复制代码

1
mui(container).progressbar({progress:20}).show();

progressbar初始化逻辑：
检查当前容器(container控件)自身是否包含.mui-progressbar类：
当前容器包含.mui-progressbar类，则以当前容器为目标控件，直接显示进度；
否则，检查当前容器的直接孩子节点是否包含.mui-progressbar类，若存在，则以遍历到的第一个含有.mui-progressbar类的孩子节点为目标控件，显示进度；
若当前容器的直接孩子节点，均不含.mui-progressbar类,则自动创建进度条控件；
更改显示进度条:

复制代码

1
mui(container).progressbar().setProgress(50);

关闭进度条:

复制代码

1
mui(container).progressbar().hide();

备注：关闭进度条一般用于动态创建（DOM中预先未定义）的进度条，调用hide方法后，会直接删掉对应的DOM节点；若已提前创建好DOM节点的进度条，调用hide方法无效；

2、滑块

复制代码

1
2
3
4
<div class="mui-input-row mui-input-range">
<label>Range</label>
<input type="range" min="0" max="100">
</div>

获取滑块数值的样例代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="mui-content">
<div class="mui-input-row mui-input-range">
<label>Range</label>
<input type="range" min="0" max="100" id="range1">
</div>
<div style="padding:20px;">
<input type="button" class="mui-btn" value="获取滑块值" onclick="getVal();" />
</div>
</div>
<script>
function getVal(){
var rangeObj = mui('#range1');
mui.toast(rangeObj[0].value);
}
</script>

3、switch 开关
mui提供了开关控件，点击滑动两种手势都可以对开关控件进行操作,UI如下：

默认开关控件,带on/off文字提示，打开时为绿色背景，基本class类为.mui-switch、.mui-switch-handle，DOM结构如下：

复制代码

1
2
3
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>

若希望开关默认为打开状态，只需要在.mui-switch节点上增加.mui-active类即可，如下：

复制代码

1
2
3
4
<!-- 开关打开状态，多了一个.mui-active类 -->
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>

若希望隐藏on/off文字提示，变成简洁模式，需要在.mui-switch节点上增加.mui-switch-mini类，如下：

复制代码

1
2
3
4
5
6
7
8
<!-- 简洁模式开关关闭状态 -->
<div class="mui-switch mui-switch-mini">
<div class="mui-switch-handle"></div>
</div>
<!-- 简洁模式开关打开状态 -->
<div class="mui-switch mui-switch-mini mui-active">
<div class="mui-switch-handle"></div>
</div>

mui默认还提供了蓝色开关控件，只需在.mui-switch节点上增加.mui-switch-blue类即可，如下：

复制代码

1
2
3
4
5
6
7
8
<!-- 蓝色开关关闭状态 -->
<div class="mui-switch mui-switch-blue">
<div class="mui-switch-handle"></div>
</div>
<!-- 蓝色开关打开状态 -->
<div class="mui-switch mui-switch-blue mui-active">
<div class="mui-switch-handle"></div>
</div>

蓝色开关上增加.mui-switch-mini即可变成无文字的简洁模式

若要获得当前开关状态，可通过判断当前开关控件是否包含.mui-active类来实现，若包含，则为打开状态，否则即为关闭状态；如下为代码示例：

复制代码

1
2
3
4
5
6
var isActive = document.getElementById("mySwitch").classList.contains("mui-active");
if(isActive){
console.log("打开状态");
}else{
console.log("关闭状态");
}

若使用js打开、关闭开关控件，可使用switch插件的toggle()方法，如下为示例代码：

复制代码

1
mui("#mySwitch").switch().toggle();

事件
开关控件在打开/关闭两种状态之间进行切换时，会触发toggle事件,通过事件的detail.isActive属性可以判断当前开关状态。可通过监听toggle事件，可以在开关切换时执行特定业务逻辑。如下为使用示例：

复制代码

1
2
3
4
5
6
7
document.getElementById("mySwitch").addEventListener("toggle",function(event){
if(event.detail.isActive){
console.log("你启动了开关");
}else{
console.log("你关闭了开关");
}
})