❮ Jeasyui Datagrid Datagrid10 Plugins Form Datetimebox ❯

jQuery EasyUI Basic Plugin - `Progressbar`

Override defaults using $.fn.progressbar.defaults.

The Progressbar provides feedback on the progress of a lengthy operation. The progress can be updated to inform the user about the current state of the operation.

Dependencies

none

Usage

Creating a ProgressBar

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

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

Creating a ProgressBar using JavaScript.

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

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

Getting or Setting the Value

We retrieve the current value and set a new value for the 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	Sets the width of the progressbar.	auto
height	number	The height of the component. Available since version 1.3.2.	22
value	number	The 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. <br>Example: $('#p').progressbar({<br> onChange: function(value){<br> alert(value)<br> }<br>});

Methods

Name	Parameters	Description
options	none	Returns the options object.
resize	width	Resizes the component. <br>Example: $('#p').progressbar('resize'); // Resize to initial width<br>$('#p').progressbar('resize', 350); // Resize to a new width
getValue	none	Returns the current progress value.
setValue	value	Sets a new progress value.