佐佑时代

ProgressBar（进度条）

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


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


使用案例

创建进度条


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

使用Javascript创建进度条。

                   

                

                   $('#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 在值更改的时候触发。
代码示例：
                            $('#p').iProgressbar({
                                    onChange: function(value){
                                    alert(value)
                                    }
                            });
方法
方法名 方法参数 描述
options none 返回属性对象。
resize width 组件大小。

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