jQuery EasyUI 基礎(chǔ)插件 – Progressbar 進度條

2018-09-19 08:55 更新

jQuery EasyUI 基礎(chǔ)插件 - Progressbar 進度條

jQuery EasyUI 插件 jQuery EasyUI 插件

通過 $.fn.progressbar.defaults 重寫默認的 defaults。

進度條（progressbar）提供了一種顯示長時間操作進度的反饋。進度可被更新以便讓用戶知道當(dāng)前正在執(zhí)行的操作。

依賴

  • none

用法

創(chuàng)建進度條（ProgressBar）

進度條（ProgressBar）組件可以從 html 標(biāo)記創(chuàng)建或者編程創(chuàng)建。從標(biāo)記創(chuàng)建更容易些，把 'easyui-progressbar' class 加入到 <div> 標(biāo)記。

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

使用 javascript 創(chuàng)建進度條（ProgressBar）。

<div id="p" style="width:400px;"></div>

$('#p').progressbar({
    value: 60
});

獲取或者設(shè)置值

我們獲取當(dāng)前值并且給這個組件設(shè)置一個新值。

var value = $('#p').progressbar('getValue');
if (value < 100){     value += Math.floor(Math.random() * 10);     $('#p').progressbar('setValue', value); }

屬性

名稱 類型 描述 默認值
width string 設(shè)置進度條（progressbar）的寬度。 auto
height number 組件的高度。該屬性自版本 1.3.2 起可用。 22
value number 百分比值。 0
text string 顯示在組件上的文本模板。 {value}%

事件

名稱 參數(shù) 描述
onChange newValue,oldValue 當(dāng)值改變時觸發(fā)。
代碼實例： 
$('#p').progressbar({
	onChange: function(value){
		alert(value)
	}
});

方法

名稱 參數(shù) 描述
options none 返回選項（options）對象。
resize width 調(diào)整組件尺寸。
代碼實例： 
$('#p').progressbar('resize');  // 調(diào)整進度條為初始寬度
$('#p').progressbar('resize', 350);  // 調(diào)整進度條為一個新的寬度
getValue none 返回當(dāng)前的進度值。
setValue value 設(shè)置一個新的進度值。
jQuery EasyUI 插件 jQuery EasyUI 插件
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號