jQuery EasyUI Basic Plugin -Progressbar Progress Bar

jQuery EasyUI 插件jQuery EasyUI Plugin

Override the default defaults via $.fn.progressbar.defaults.

The progressbar provides feedback on the progress of long-running operations. The progress can be updated so users know the operation currently being performed.

Dependencies

  • none

Usage

Create a ProgressBar

The ProgressBar component can be created from HTML markup or programmatically. Creating from markup is easier; add the 'easyui-progressbar' class to the <div> tag.

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

Create a ProgressBar using JavaScript.

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

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

Get or Set Value

We get the current value and set a new value for this component.

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

Properties

Name Type Description Default Value
width string Sets the width of the progressbar. auto
height number The height of the component. This property is available since version 1.3.2. 22
value number A percentage value. 0
text string The text template displayed on the component. {value}%

Events

Name Parameters Description
onChange newValue,oldValue Triggered when the value changes.
Code example:
$('#p').progressbar({
    onChange: function(value){
        alert(value)
    }
});

Methods

Name Parameters Description
options none Returns the options object.
resize width Resizes the component.
Code example:
$('#p').progressbar('resize');  // 调整进度条为初始宽度
$('#p').progressbar('resize', 350);  // 调整进度条为一个新的宽度
getValue none Returns the current progress value.
setValue value Sets a new progress value.
jQuery EasyUI 插件jQuery EasyUI Plugin Other Extensions