槽谎欢洽豢抄我哎腥忙舜盯鲍
参考文档
1、有准确值的进度条
有准确值的进度条会显示当前进度正处于整体进度的占比位置，用户可以更直观的预期完成时间；
使用进度条控件，需要一个进度条控件容器，mui会自动识别该容器下是否有进度条控件，若没有，则自动创建。
进度条控件DOM结构：
1.进度条
<body> <!--头部--> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">轮播组件</h1> </header> <!--头部结束--> <!--主体--> <div class="mui-content"> <!--为了显示效果更明显，使用div包裹--> <div style="padding:20px;"> <div id="demo1" class="mui-progressbar"> <span></span> </div> </div> </div> </body>
执行：
使用js让进度条滚动起来
<body>
<!--头部-->
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">轮播组件</h1>
</header>
<!--头部结束-->
<!--主体-->
<div class="mui-content">
<!--为了显示效果更明显，使用div包裹-->
<div style="padding:20px;">
<div id="demo1" class="mui-progressbar">
<span></span>
</div>
</div>
<div style="padding:0px 20px;">
<button type="button"onclick="setPro();">展示进度条</button>
</div>
</div>
<script type="text/javascript">
function setPro()
{
mui("#demo1").progressbar({progress:60}).show();
}
</script>
</body>
点击按钮，显示60%的进度条
设置每隔1秒，进度条加载10%
<body>
<!--头部-->
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">轮播组件</h1>
</header>
<!--头部结束-->
<!--主体-->
<div class="mui-content">
<!--为了显示效果更明显，使用div包裹-->
<div style="padding:20px;">
<div id="demo1" class="mui-progressbar">
<span></span>
</div>
</div>
<div style="padding:0px 20px;">
<button type="button"onclick="setPro();">展示进度条</button>
</div>
</div>
<script type="text/javascript">
function setPro()
{
var obj=mui("#demo1");
var b1=0;
setInterval(function(){
obj.progressbar({progress:b1}).show();
b1+=10;
},1000);
}
</script>
</body>
此时，每一秒进度条增长10%
2.滑块
<body> <div class="mui-content"> <div style="padding:20px;padding-top:50px;"> <div class="mui-input-row mui-input-range"> <label>Range</label> <input type="range" min="0" max="100"> </div> </div> </div> </body>
执行：
获取滑块的值
<body>
<div class="mui-content">
<div style="padding:20px;padding-top:50px;">
<div class="mui-input-row mui-input-range" >
<label>Range</label>
<input type="range" min="0" max="100" id="range1">
</div>
</div>
<div style="padding: 0 20px;">
<button type="button" onclick="getV()">获取滑块的值</button>
</div>
</div>
<script type="text/javascript">
function getV()
{
//根据id获取滑块对象
var obj=mui("#range1");
var val=obj[0].value;
mui.toast(val);
}
</script>
</body>
执行：
3.switch开关
<body> <div class="mui-content"> <div class="mui-switch"> <div class="mui-switch-handle"></div> </div> </div> </body>
执行：
如果不想开关上面有on,off英文，可以这样写：
<body> <div class="mui-content"> <div class="mui-switch mui-switch-mini"> <div class="mui-switch-handle"></div> </div> </div> </body>
执行：
mui默认还提供了蓝色开关控件，只需在.mui-switch节点上增加.mui-switch-blue类即可，如下：
<body> <div class="mui-content"> <div class="mui-switch mui-switch-blue"> <div class="mui-switch-handle"></div> </div> </div> </body>
执行：
若要获得当前开关状态，可通过判断当前开关控件是否包含.mui-active类来实现，若包含，则为打开状态，否则即为关闭状态；如下为代码示例：
<body>
<div class="mui-content">
<div class="mui-switch mui-switch-blue" id="mySwitch">
<div class="mui-switch-handle"></div>
</div>
</div>
<div>
<button type="button" onclick="getV()">获取开关的状态</button>
</div>
<script type="text/javascript">
function getV()
{
//通过id获取开关对象
var obj=document.getElementById("mySwitch");
//通过类样式获取开关状态,返回值为true或者false
if(obj.classList.contains("mui-active"))
{
mui.toast("当前开关的状态是：开");
}
else
{
mui.toast("当前开关的状态是：关");
}
}
</script>
</body>
执行：
使用事件监听获取开关的值
<body>
<div class="mui-content">
<div class="mui-switch mui-switch-blue" id="mySwitch">
<div class="mui-switch-handle"></div>
</div>
</div>
<script type="text/javascript">
mui.plusReady(function(){
//监听开关的toggle状态
document.getElementById("mySwitch").addEventListener("toggle",function(e){
if(event.detail.isActive)
{
mui.toast("当前开关的状态是：开");
}
else
{
mui.toast("当前开关的状态是：关");
}
});
});
</script>
</body>
执行：
冷胳害腐胺翠祁屑庞安纱抬轿