本文實(shí)例為大家分享了Jquery Easyui進(jìn)度條組件的實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下
加載方式
Class加載
<div class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
JS調(diào)用加載
<div id="box" style="width: 400px;"></div><script> $(function () { $('#box').progressbar({ // 設(shè)置進(jìn)度條寬度 width : '200', // 設(shè)置進(jìn)度條高度 height : '100', //設(shè)置進(jìn)度條值 value : '60', // 設(shè)置進(jìn)度條百分比模版 text: '百分之{value}' }); });</script>屬性列表
事件列表
<script> $(function () { $('#box').progressbar({ // 設(shè)置進(jìn)度條寬度 width : '200', // 設(shè)置進(jìn)度條高度 height : '100', //設(shè)置進(jìn)度條值 value : '60', // 設(shè)置進(jìn)度條百分比模版 text: '百分之{value}', // 在值更改的時(shí)候觸發(fā) onChange:function (newValue,oldValue) { console.log("新值:"+newValue); console.log("舊值:"+oldValue); }, }); }); </script>方法列表
<script> $(function () { $('#box').progressbar({ value : '40', onChange : function (newValue, oldValue) { console.log('新:' + newValue + ',舊:' + oldValue); }, }); // 返回屬性對(duì)象 console.log($('#box').progressbar('options')); // 設(shè)置組件大小(寬度) $('#box').progressbar('resize','500'); // 返回當(dāng)前進(jìn)度值 console.log($('#box').progressbar('getValue')); // 設(shè)置一個(gè)新的進(jìn)度值 $('#box').progressbar('setValue','50'); // 可以使用$.fn.progressbar.defaults 重寫默認(rèn)值對(duì)象。 $.fn.progressbar.defaults.value = '60'; }); </script>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
