🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
### ProgressBar(进度条) 使用$.fn.progressbar.defaults重写默认值对象。 进度条提供了一个反馈显示一个长时间运行的操作进展。可以更新的进展条,让用户知道当前正在执行操作。 ![](https://box.kancloud.cn/2016-07-19_578d9134881c5.png) ####   #### 使用案例 ##### 创建进度条 使用HTML标签或程序创建进度条组件。从标签创建更加简单,添加'easyui-progressbar'类ID到<div/>标签。 1. <divid="p"class="easyui-progressbar"data-options="value:60"style="width:400px;"></div> <div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div> 使用Javascript创建进度条。 1. <divid="p"style="width:400px;"></div> <div id="p" style="width:400px;"></div> 1. $('#p').progressbar({ 1. value: 60 1. }); $('#p').progressbar({ value: 60 }); ##### 获取值和设置值 获取当前值和设置一个新的值到进度条控件。 1. var value = $('#p').progressbar('getValue'); 1. if (value < 100){ 1. value += Math.floor(Math.random() * 10); 1. $('#p').progressbar('setValue', value); 1. } 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}% | ####   #### 事件 <table class="doc-table"><tbody><tr><th><strong>事件名</strong></th> <th><strong>事件参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>onChange</td> <td>newValue,oldValue</td> <td>在值更改的时候触发。 <p>代码示例:</p><pre>$('#p').progressbar({&#13; onChange: function(value){&#13; alert(value)&#13; }&#13; });&#13; </pre></td></tr></tbody></table> ####   #### 方法 <table class="doc-table"><tbody><tr><th><strong>方法名</strong></th> <th><strong>方法参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>options</td> <td>none</td> <td>返回属性对象。</td></tr><tr><td>resize</td> <td>width</td> <td>组件大小。  <p>代码示例:</p><pre>$('#p').progressbar('resize');           // 更改进度条到原始宽度&#13; $('#p').progressbar('resize', 350);   // 更改进度条到新的宽度</pre></td></tr><tr><td>getValue</td> <td>none</td> <td>返回当前进度值。</td></tr><tr><td>setValue</td> <td>value</td> <td>设置一个新的进度值。</td></tr></tbody></table>