jQuery EasyUI 基礎插件 - Progressbar 進度條

jQuery EasyUI 插件 jQuery EasyUI 插件

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

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

依賴

  • none

用法

創建進度條（ProgressBar）

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

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

使用 javascript 創建進度條（ProgressBar）。

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

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

獲取或者設置值

我們獲取當前值並且給這個組件設置一個新值。

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

屬性

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

事件

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

方法

名稱 參數 描述
options none 返回選項（options）對象。
resize width 調整組件尺寸。
代碼實例： 
$('#p').progressbar('resize');  // 調整進度條為初始寬度
$('#p').progressbar('resize', 350);  // 調整進度條為一個新的寬度
getValue none 返回當前的進度值。
setValue value 設置一個新的進度值。
jQuery EasyUI 插件 jQuery EasyUI 插件