ProgressBar（进度条）

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

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

用法

使用HTML标签或程序创建进度条组件。从标签创建更加简单，添加data-toggle="topjui-progressbar"到<div/>标签。

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

使用Javascript创建进度条。

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

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

获取值和设置值

获取当前值和设置一个新的值到进度条控件。

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

属性

属性名	属性值类型	描述	默认值
width	string	设置进度条宽度。	auto
height	number	设置进度条高度。	22
value	number	进度条百分比值。	0
text	string	临时显示在组件上的文本。	{value}%

事件

事件名	事件参数	描述
onChange	newValue,oldValue	在值更改的时候触发。见下方代码示例。

事件代码示例

onChange事件示例：

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

方法

方法名	方法参数	描述
options	none	返回属性对象。
resize	width	组件大小。见下方代码示例。
getValue	none	返回当前进度值。
setValue	value	设置一个新的进度值。

方法代码示例

resize方法示例：

$('#p').iProgressbar('resize');
$('#p').iProgressbar('resize', 350);