jQuery EasyUI based plug - Progressbar progress bar
jQuery EasyUI plugin
By $ .fn.progressbar.defaults override the default defaults.
Progress bar (progressbar) provides a display of the operation progress feedback for a long time. Progress can be updated in order to let the user know the operation currently being performed.
rely
- none
usage
Creating a progress bar (ProgressBar)
Progress bar (ProgressBar) component can create tags from html or programming created. Created from the tag easier to 'easyui-progressbar' class added to the <div> tag.
<Div id = "p" class = "easyui-progressbar" data-options = "value: 60" style = "width: 400px;"> </ div>
Use javascript to create a progress bar (ProgressBar).
<Div id = "p" style = "width: 400px;"> </ div>
$ ( '# P'). Progressbar ({ value: 60 });
Gets or sets the value
We get the current value of the component and to set a new value.
var value = $ ( '# p') progressbar ( 'getValue').; if (value <100) { value + = Math.floor (Math.random () * 10); . $ ( '# P') progressbar ( 'setValue', value); }
Attributes
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
width | string | 设置进度条(progressbar)的宽度。 | auto |
height | number | 组件的高度。该属性自版本 1.3.2 起可用。 | 22 |
value | number | 百分比值。 | 0 |
text | string | 显示在组件上的文本模板。 | {value}% |
event
名称 | 参数 | 描述 |
---|---|---|
onChange | newValue,oldValue | 当值改变时触发。 代码实例: $('#p').progressbar({ onChange: function(value){ alert(value) } }); |
method
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回选项(options)对象。 |
resize | width | 调整组件尺寸。 代码实例: $('#p').progressbar('resize'); // 调整进度条为初始宽度 $('#p').progressbar('resize', 350); // 调整进度条为一个新的宽度 |
getValue | none | 返回当前的进度值。 |
setValue | value | 设置一个新的进度值。 |
jQuery EasyUI plugin