第 8 章 ProgressBar(进度条)组件_进度条 js组件-CSDN博客

本文链接：https://blog.csdn.net/lgs198722/article/details/122245842

本文主要介绍了EasyUI中的ProgressBar组件，讲解了其加载方式、属性、事件和方法，该组件独立使用，适合需要进度反馈的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习要点:

1.加载方式

2.属性列表

3.事件列表

4.方法列表

本节课重点了解 EasyUI 中 ProgressBar(进度条)组件的使用方法，这个组件不依赖于其他组件。

一.加载方式


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

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

二.属性列表

progressbar 属性

属性名	值	说明
width	string	设置进度条宽度。默认为 auto。
height	number	设置进度条高度。默认为 22。
value	number	设置进度条值。默认为 0。
text	string	设置进度条百分比模版:默认{value}%

//属性设置

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

三.事件列表

Progressbar 事件

事件名	传参	说明
Progressbar 事件	onChange newValue,	oldValue 在值更改的时候触发

$('#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 方法

方法名	传参	说明
options	none	返回属性对象
resize	width	组件大小
getValue	none	返回当前进度值
setValue	value	设置一个新的进度值

//返回属性对象
 console.log($('#box').progressbar('options'));
//设置组件长度
 $('#box').progressbar('resize', '500');
//得到组件值 
alert($('#box').progressbar('getValue'));
//设置组件值
 $('#box').progressbar('setValue', '80');

PS:我们可以使用$.fn.progressbar.defaults 重写默认值对象。