學習要點
- 屬性列表
- 事件列表
屬性列表
-
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>
