顶部广告位

ProgressBar(进度条)

使用$.fn.progressbar.defaults重写默认值对象。

进度条提供了一个反馈显示一个长时间运行的操作进展。可以更新的进展条,让用户知道当前正在执行操作。

示例

创建进度条

使用HTML标签或程序创建进度条组件。从标签创建更加简单,添加'easyui-progressbar'类ID到<div/>标签。

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

使用Javascript创建进度条。

<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 设置进度条宽度。 auto
height number 设置进度条高度。(该属性自1.3.2版开始可用) 22
value number The percentage value. 0
text string The text template to be displayed on component. {value}%

事件

事件名 事件参数 描述
onChange newValue,oldValue 在值更改的时候触发。

代码示例:

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

方法

方法名 方法参数 描述
options none 返回属性对象。
resize width 组件大小。 

代码示例:

$('#p').progressbar('resize');           // 更改进度条到原始宽度
$('#p').progressbar('resize', 350);   // 更改进度条到新的宽度
getValue none 返回当前进度值。
setValue value 设置一个新的进度值。

鄂ICP备16023636号 © 2017 菜鸟程序员