一. 加载方式
//class 加载方式
<div class="easyui-progressbar"
data-options="value:60" style="400px;">
</div>
//JS 加载调用
$('#box').progressbar({
value : 60,
});
二. 属性列表
//属性设置
$('#box').progressbar({
width : 400,
height : 30,
value : 60,
text : '{value}%',
});
三. 事件列表
$('#box').progressbar({
value : 60,
onChange : function (newValue, oldValue) {
console.log('新:' + newValue + ',旧:' + oldValue);
},
});
setTimeout(function () {
$('#box').progressbar('setValue', 70);
}, 1000);
//实现动画效果
setInterval(function () {
$('#box').progressbar('setValue',
$('#box').progressbar('getValue') + 5);
}, 200);
三.方法列表
//返回属性对象
console.log($('#box').progressbar('options'));
//设置组件长度
$('#box').progressbar('resize', '500');
//得到组件值
alert($('#box').progressbar('getValue'));
//设置组件值
$('#box').progressbar('setValue', '80');
PS:我们可以使用$.fn.progressbar.defaults 重写默认值对象。
$.fn.progressbar.defaults.value = '60';