# 加載方式 ## 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> ```