快捷導(dǎo)航

Jquery Easyui進(jìn)度條組件Progress使用詳解（8）

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

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

本文實(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}',
   // 在值更改的時候觸發(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'));
  // 設(shè)置組件大小(寬度)
  $('#box').progressbar('resize','500');
  // 返回當(dāng)前進(jìn)度值
  console.log($('#box').progressbar('getValue'));
  // 設(shè)置一個新的進(jìn)度值
  $('#box').progressbar('setValue','50');
  // 可以使用$.fn.progressbar.defaults 重寫默認(rèn)值對象。
  $.fn.progressbar.defaults.value = '60';
  });

 </script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: