Create ProgressBar
The ProgressBar component can be created from html markup or programatically. Creation from markup is even easier. Add 'easyui-progressbar' class to <div/> markup.
<div id="p" class="easyui-progressbar" style="width:400px;"></div>
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
width string Set the progressbar width. auto
value number The percentage value. 0
text string The text template to be displayed on component. {value}%
Events
Name Parameters Description
onChange newValue,oldValue Fires when the value is changed.
Methods
Name Parameter Description
options none Return the options object.
resize width Resize the component.
getValue none Return the current progress value.
setValue value Set a new progress value.
The ProgressBar component can be created from html markup or programatically. Creation from markup is even easier. Add 'easyui-progressbar' class to <div/> markup.
<div id="p" class="easyui-progressbar" style="width:400px;"></div>
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
width string Set the progressbar width. auto
value number The percentage value. 0
text string The text template to be displayed on component. {value}%
Events
Name Parameters Description
onChange newValue,oldValue Fires when the value is changed.
Methods
Name Parameter Description
options none Return the options object.
resize width Resize the component.
getValue none Return the current progress value.
setValue value Set a new progress value.