EasyUI Progressbar 进度条

最新推荐文章于 2023-01-14 06:56:17 发布

转载最新推荐文章于 2023-01-14 06:56:17 发布 · 319 阅读

文章标签：

#javascript #ViewUI

本文介绍了如何使用EasyUI框架中的进度条组件，包括创建进度条的方法、如何获取和设置进度值、组件的相关属性及事件等。此外还提供了具体的代码示例。

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

通过 $.fn.progressbar.defaults 重写默认的 defaults。

进度条（progressbar）提供了一种显示长时间操作进度的反馈。进度可被更新以便让用户知道当前正在执行的操作。

依赖

none

用法

创建进度条（ProgressBar）

进度条（ProgressBar）组件可以从 html 标记创建或者编程创建。从标记创建更容易些，把 'easyui-progressbar' class 加入到 <div> 标记。

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

使用 javascript 创建进度条（ProgressBar）。

<div id="p" style="width:400px;"></div>

$('#p').progressbar({
    value: 60
});

获取或者设置值

我们获取当前值并且给这个组件设置一个新值。

var value = $('#p').progressbar('getValue');
if (value < 100){
    value += Math.floor(Math.random() * 10);
    $('#p').progressbar('setValue', value);
}

属性

名称	类型	描述	默认值
width	string	设置进度条（progressbar）的宽度。	auto
height	number	组件的高度。该属性自版本 1.3.2 起可用。	22
value	number	百分比值。	0
text	string	显示在组件上的文本模板。	{value}%

事件

名称	参数	描述
onChange	newValue,oldValue	当值改变时触发。代码实例： $('#p').progressbar({ onChange: function(value){ alert(value) } });

方法

名称	参数	描述
options	none	返回选项（options）对象。
resize	width	调整组件尺寸。代码实例： $('#p').progressbar('resize'); // 调整进度条为初始宽度 $('#p').progressbar('resize', 350); // 调整进度条为一个新的宽度
getValue	none	返回当前的进度值。
setValue	value	设置一个新的进度值。