學(xué)習(xí)要點
- 屬性列表
- 事件列表
屬性列表
-
width
設(shè)置進(jìn)度條寬度默認(rèn)是auto
-
height
設(shè)置進(jìn)度條高度 默認(rèn)是22
-
value
設(shè)置進(jìn)度條的值
-
text
設(shè)置進(jìn)度條百分比模板,默認(rèn){value}%
事件列表
-
onChange
參數(shù)有兩個挂谍，第一個newValue,oldValue 在值更改的時候觸發(fā)
方法列表
-
options
返回屬性對象
resize
參數(shù)width 組件大小
- getValue
返回當(dāng)前進(jìn)度值
- setValue
設(shè)置一個新的值
//返回屬性對象 console.log($('#box').progressbar('options'));
//設(shè)置組件長度 $('#box').progressbar('resize', '500');
//得到組件值 alert($('#box').progressbar('getValue'));
//設(shè)置組件值 $('#box').progressbar('setValue', '80');
方法名 傳參 說明
options none 返回屬性對象 resize width 組件大小 getValue none 返回當(dāng)前進(jìn)度值
setValue value 設(shè)置一個新的進(jìn)度值
PS：我們可以使用$.fn.progressbar.defaults 重寫默認(rèn)值對象口叙。 $.fn.progressbar.defaults.value = '60';
具體demo
<body>
<!--進(jìn)度條開始-->
<div id="progressbar"></div>
<!--進(jìn)度條結(jié)束-->
<!--進(jìn)度條第二個開始-->
<div id="progressbar2"></div>
<!--進(jìn)度條第二個結(jié)束-->
</body>
<script>
$(function(){
//進(jìn)度條開始
$("#progressbar").progressbar({
width:400,
height:50,
value:30,
text:'{value}%',
});
//進(jìn)度條結(jié)束
//進(jìn)度條2開始
$("#progressbar2").progressbar({
width:1000,
height:50,
value:0,
text:'{value}%',
});
//進(jìn)度條2結(jié)束
//進(jìn)度條2開始
var timer = setInterval(function(){
var progressvalue = $("#progressbar2").progressbar('getValue');
if(progressvalue>100)
{
clearInterval(timer);
}else
{
$("#progressbar2").progressbar('setValue',progressvalue+5);
}
},1000);
//進(jìn)度條2結(jié)束
})
</script>
