学习要点
- 属性列表
- 事件列表
属性列表
-
width
设置进度条宽度默认是auto
-
height
设置进度条高度 默认是22
-
value
设置进度条的值
-
text
设置进度条百分比模板,默认{value}%
事件列表
-
onChange
参数有两个，第一个newValue,oldValue 在值更改的时候触发
方法列表
-
options
返回属性对象
resize
参数width 组件大小
- getValue
返回当前进度值
- setValue
设置一个新的值
//返回属性对象 console.log($('#box').progressbar('options'));
//设置组件长度 $('#box').progressbar('resize', '500');
//得到组件值 alert($('#box').progressbar('getValue'));
//设置组件值 $('#box').progressbar('setValue', '80');
方法名 传参 说明
options none 返回属性对象 resize width 组件大小 getValue none 返回当前进度值
setValue value 设置一个新的进度值
PS：我们可以使用$.fn.progressbar.defaults 重写默认值对象。 $.fn.progressbar.defaults.value = '60';
具体demo
<body>
<!--进度条开始-->
<div id="progressbar"></div>
<!--进度条结束-->
<!--进度条第二个开始-->
<div id="progressbar2"></div>
<!--进度条第二个结束-->
</body>
<script>
$(function(){
//进度条开始
$("#progressbar").progressbar({
width:400,
height:50,
value:30,
text:'{value}%',
});
//进度条结束
//进度条2开始
$("#progressbar2").progressbar({
width:1000,
height:50,
value:0,
text:'{value}%',
});
//进度条2结束
//进度条2开始
var timer = setInterval(function(){
var progressvalue = $("#progressbar2").progressbar('getValue');
if(progressvalue>100)
{
clearInterval(timer);
}else
{
$("#progressbar2").progressbar('setValue',progressvalue+5);
}
},1000);
//进度条2结束
})
</script>
