Jquery Easyui進度條組件Progress使用詳解（8）

更新時間：2020年03月26日 09:01:58 作者：Jsakura

這篇文章主要為大家詳細介紹了Jquery Easyui進度條組件Progress的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Jquery Easyui進度條組件的實現(xiàn)代碼，供大家參考，具體內容如下

加載方式

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>

屬性列表

事件列表

<script>
  $(function () {
  $('#box').progressbar({
   // 設置進度條寬度
   width : '200',
   // 設置進度條高度
   height : '100',
   //設置進度條值
   value : '60',
   // 設置進度條百分比模版
   text: '百分之{value}',
   // 在值更改的時候觸發(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);
   },
  });

  // 返回屬性對象
  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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: