首先引入js 和 css
<link href="css/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="css/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="jq/jquery.min.js" type="text/javascript"></script>
<script src="jq/jquery.easyui.min.js" type="text/javascript"></script>
js 方式加载progressbar
var t = 0, timer = null;
$(function () {
//开启一个定时器启动加载
startBar();
$('#bar').progressbar({
width: 400,//显示宽度
height: 20,//显示高度
value: 0,//默认启示值为0
text: '{value}%',//进度条中文本显示的内容
//当进度数值发生改变引发的事件
onChange: function (newValue, oldValue) {
//newValue 为 该表后新的value值 ,oldvalue 改变前老值
if (newValue == 100) {
//当进度条值达到100%后关闭定时器
window.clearInterval(time_id);
time_id = null;
}
}
});
})
function addProgressBar() {
t += 10;
//此方法为progressbar 设置值
$('#bar').progressbar('setValue', t);
}
//开启一个定时器
function startBar() {
time_id=setInterval(addProgressBar, 1000);
}
<body>
<div id="bar"></div>
</body>
progressbar的相关方法
options 无 返回所有属性。
resize width 重置或重新设置组件大小
getValue 无 获取组件当前的进度值。如：KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲bar').progressB…(’#bar’).progressBar(‘setValue’,10);