现在的位置: 首页 > 综合 > 正文

easyUI ProgressBar

2013年10月22日 ⁄ 综合 ⁄ 共 1004字 ⁄ 字号 评论关闭

@author YHC

覆盖默认值$.fn.progressbar.defaults.

progressbar 提供一个反馈显示一个长时间执行的进度条,progress
可以更新来让用户知道当前执行的一些操作.


相关依赖

  • none

使用示例

创建ProgressBar

ProgressBar 组件可以从html标记和编程的方式创建.从标记创建非常简单.添加'easyui-progressbar'样式到<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);  
}  

属性

Name Type Description Default
width string 设置 progressbar 宽度. auto
value number 设置百分比值. 0
text string 显示到组件上的文本模版. {value}%

事件

Name Parameters Description
onChange newValue,oldValue 当值改变的时候触发.

示例代码:

$('#p').progressbar({
	onChange: function(value){
		alert(value)
	}
});

方法

Name Parameter Description
options none 返回options 对象.
resize width 重置组件大小.

示例代码:

$('#p').progressbar('resize');  // 在原来的宽度重置bar的大小
$('#p').progressbar('resize', 350);  // 重置bar的大小使用新的宽度
getValue none 返回当前的进度值.
setValue value 设置新的进度值.


  以上如有错误信息,请指出,thanks!

【上篇】
【下篇】

抱歉!评论已关闭.