Progressbar 进度条

jQuery EasyUI 插件 jQuery EasyUI 插件

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

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

依赖

用法

创建进度条(ProgressBar)

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

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

w→3→x→u→e.com提供本在线速查手册,请勿盗用!

wōゃ♡3ōゃ♡xōゃ♡uōゃ♡e.com提供本在线速查手册,请勿盗用!

使用 javascript 创建进度条(ProgressBar)。

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

w→3→x→u→e.com提供本在线速查手册,请勿盗用!

wōゃ♡3ōゃ♡xōゃ♡uōゃ♡e.com提供本在线速查手册,请勿盗用!

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

w→3→x→u→e.com提供本在线速查手册,请勿盗用!

wōゃ♡3ōゃ♡xōゃ♡uōゃ♡e.com提供本在线速查手册,请勿盗用!

获取或者设置值

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

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

w→3→x→u→e.com提供本在线速查手册,请勿盗用!

wōゃ♡3ōゃ♡xōゃ♡uōゃ♡e.com提供本在线速查手册,请勿盗用!

属性

名称 类型 描述 默认值
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)
	}
});

w→3→x→u→e.com提供本在线速查手册,请勿盗用!

wōゃ♡3ōゃ♡xōゃ♡uōゃ♡e.com提供本在线速查手册,请勿盗用!

方法

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

w→3→x→u→e.com提供本在线速查手册,请勿盗用!

wōゃ♡3ōゃ♡xōゃ♡uōゃ♡e.com提供本在线速查手册,请勿盗用!

getValue none 返回当前的进度值。
setValue value 设置一个新的进度值。
jQuery EasyUI 插件 jQuery EasyUI 插件