ProgressBar( 进度条) 组件

一. 加载方式

//class 加载方式
<div class="easyui-progressbar"
data-options="value:60" style="width:400px;">
</div>

//JS 加载调用
$('#box').progressbar({
value : 60,
});

二. 属性列表

ProgressBar( 进度条) 组件

//属性设置
$('#box').progressbar({
width : 400,
height : 30,
value : 60,
text : '{value}%',
});

三. 事件列表

ProgressBar( 进度条) 组件

$('#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);

三.方法列表

ProgressBar( 进度条) 组件

//返回属性对象
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';

上一篇:兼容解决 IE 、火狐、谷歌浏览器中 Iframe框架的页面缓存的方法


下一篇:第一百九十七节,jQuery EasyUI,LinkButton(按钮)组件