进度条

简介

进度条控件（progressbar），以动画形式显示当前进度值，并自由控制文字说明的显示。同时，在进度发生变化和达到最大值时分别触发相应事件。

使用方法

1. 静态框架使用方法仅EAS7.5版本

<wafctrl:progressBar id="id" name="name" />

2. JS动态创建EAS8.0+

var options = {title:'progressbar' ,id:'progressbar'};  
var dom = waf.createDOM("progressBar", options);
waf.appendDOM(waf("body"), dom);
waf.initComponent("progressBar", options, dom);

3. 通用DOM创建EAS8.0+

<input id="id" name="number" type="text" class="enter2tab ui-progressBar form" ctrlrole="progressBar" aria-disabled="false" style="" tabindex="0">
<!--DOM创建好之后，使用js初始化控件-->
waf("#id").wafProgressBar(options);

4. 方法&事件使用EAS7.5+

//调用方法
waf("#id").wafProgressBar('method', parameter...);
//eg:获取和设置值
waf("#id").wafProgressBar("getValue");
waf("#id").wafProgressBar("setValue");
//eg:更改事件
waf("#id").wafProgressBar("option","onchange",fn);

属性说明

id String 缺省值: 无默认值不可以在运行期改变 EAS7.5+

定义进度条控件的id，若无定义将自动生成.

value Double 缺省值: 0 EAS7.5+

定义进度条的显示值，默认值为0.

max Double 缺省值: 100 EAS7.5+

定义进度条的最大值，默认值为100.

round Integer 缺省值: 0 EAS7.5+

定义进度条的值以百分比显示时四舍五入后的小数位数，默认值为0.

position String 缺省值: bottom’ EAS7.5+

定义文字相对于进度条的相对位置，值为’bottom’、’left’、’top’、’right’、’center’之一，默认值为’bottom’.

showText Boolean 缺省值: true EAS7.5+

定义是否显示文字，默认值为true.

textFormat String 缺省值: percent EAS7.5+

定义进度条文字描述显示形式，有三种选择.值为’percent’时，以百分比显示；值为’fraction’时，以分数形式显示；也可自定义文字，如’请稍候…”，默认值为’percent’

width String 缺省值: 345 EAS7.5+

定义进度条显示长度，默认值为345px.

height String 缺省值: 8 EAS7.5+

定义进度条显示高度，默认值为8px.

foregroundClass String 缺省值: “” EAS7.5+

定义进度条里层轮廓的样式类.

backgroundClass String 缺省值: “” EAS7.5+

定义进度条外层轮廓的样式类.

style String 缺省值: ‘ EAS7.5+

定义进度条里层轮廓的样式.

方法说明

option 参数: (property[,value]) 返回值类型: any EAS7.5+

获得或设置进度条控件某属性的值，当value参数存在时，设置控件的property属性值，且无返回值，否则返回控件的property属性值.

参数说明:
- property 必要参数，进度条控件的属性
- value 可选参数，进度条控件的属性值
返回值说明:
- 当value参数不存在时，有返回值，该返回值为与property对应的属性值，可以是任意类型的javascript对象。

getValue 参数: (无) 返回值类型: Number EAS7.5+

获得进度条的值.

参数说明:
- 无
返回值说明:
- 获得进度条的值

setValue 参数: (value) 返回值类型: 无 EAS7.5+

设置进度条的值.

参数说明:
- 进度条的值
返回值说明:
- 无

事件说明

onchange 参数: (event,ui) EAS7.5+

进度条值发生变化时，触发onchange事件

参数说明:
- event 所响应的事件
- ui ui.previous为改变前的值，ui.current为改变后的值

oncomplete 参数: (event) EAS7.5+

进度条达到最大值时，触发oncomplete事件

参数说明:
- event 所响应的事件

样例集合

综合示例:
动态化:

进度条

简介