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

2018-09-19 08:55 更新

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

jQuery EasyUI 插件 jQuery EasyUI 插件

通過 $.fn.progressbar.defaults 重寫默認(rèn)的 defaults。

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

依賴

  • none

用法

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

進(jìn)度條（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)建進(jìn)度條（ProgressBar）。

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

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

獲取或者設(shè)置值

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

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

屬性

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

事件

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

方法

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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)