# 加载方式 ## Class加载 ``` <div class="easyui-progressbar" data-options="value:60" style="width:400px;"> </div> ``` ## JS调用加载 ``` <div id="box" style="width: 400px;"></div> <script> $(function () { $('#box').progressbar({ // 设置进度条宽度 width : '200', // 设置进度条高度 height : '100', //设置进度条值 value : '60', // 设置进度条百分比模版 text: '百分之{value}' }); }); </script> ``` # 属性列表 |属性名 | 值 |说明 | | --- | --- | | width | string | 设置进度条宽度。默认为 auto。| | height| number| 设置进度条高度。默认为 22。| | value | number | 设置进度条值。默认为 0。| | text | string| 设置进度条百分比模版：默认{value}%| # 事件列表 | 事件名| 传参 | 说明| | --- | --- | | onChange | newValue,oldValue | 在值更改的时候触发| ``` <script> $(function () { $('#box').progressbar({ // 设置进度条宽度 width : '200', // 设置进度条高度 height : '100', //设置进度条值 value : '60', // 设置进度条百分比模版 text: '百分之{value}', // 在值更改的时候触发 onChange:function (newValue,oldValue) { console.log("新值:"+newValue); console.log("旧值:"+oldValue); }, }); }); </script> ``` # 方法列表 | 方法名 | 传参 | 说明| | --- | --- | | options | none | 返回属性对象| | resize | width | 组件大小| | getValue | none | 返回当前进度值| | setValue | value | 设置一个新的进度值| ``` <script> $(function () { $('#box').progressbar({ value : '40', onChange : function (newValue, oldValue) { console.log('新:' + newValue + ',旧:' + oldValue); }, }); // 返回属性对象 console.log($('#box').progressbar('options')); // 设置组件大小(宽度) $('#box').progressbar('resize','500'); // 返回当前进度值 console.log($('#box').progressbar('getValue')); // 设置一个新的进度值 $('#box').progressbar('setValue','50'); // 可以使用$.fn.progressbar.defaults 重写默认值对象。 $.fn.progressbar.defaults.value = '60'; }); </script> ```