The progress bar component shows a control that indicates the progress percentage of an on-going operation.
By default, all elements with the data-role="progressbar"
attribute are displayed as progress bars.
To manually create a progress bar component, use the component constructor from the tau
namespace:
<div id="progress-bar"></div> <script> var element = document.getElementById("progress-bar"), progressBar = tau.widget.ProgressBar(element); </script>
The constructor requires an HTMLElement
parameter to create the component, and you can get it with the document.getElementById()
method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.
If the jQuery library is loaded, you can use its method:
<div id="progress-bar"></div> <script> $("#progress-bar").progressbar(); </script>
The jQuery constructor takes one optional parameter, which is an object defining the configuration options for the component.
To create a simple progress bar:
<div id="progress-bar" data-role="progressbar"></div>
The options for a component can be defined as data-...
attributes or passed as parameters to the constructor.
You can change an option for the component using the option
method.
Option | Input type | Default value | Description |
---|---|---|---|
data-max | number | 100 | Maximum value of the progress bar. |
data-min | number | 0 | Minimum value of the progress bar. |
data-value | number | 0 | Current progress value. |
The following table lists the events related to the progress bar component.
Event | Description |
---|---|
change | Triggered when the value of component changes. |
complete | Triggered when the value of component reaches the maximum value. |
To call a method on the component, use one of the existing APIs:
TAU API (RECOMMENDED):
<script> var element = document.getElementById("progress-bar"), progressBar = tau.widget.ProgressBar(element); progressBar.methodName(argument1, argument2, ...); </script>
jQuery API (support for backward compatibility):
$(".selector").progressbar("methodName", argument1, argument2, ...);
Method | Description |
---|---|
ProgressBar refresh ( ) |
Refreshes a progress bar. |
number value ( number? value ) |
Gets or sets a value. |
refresh
Refreshes a progress bar.
ProgressBar refresh ( )
The method rebuilds the DOM structure of the progress bar component. It must be called after you manually change the HTML attributes of the component's DOM structure.
The method is called automatically after any component option is changed.
Return value:
Type | Description |
---|---|
ProgressBar | Returns this. |
Code example (TAU API RECOMMENDED):
<div id="progress-bar"></div> <script> var element = document.getElementById("progress-bar"), progressBarWidget = tau.widget.ProgressBar(element); progressBarWidget.refresh(); </script>
Code example (jQuery API support for backward compatibility):
<div id="progress-bar"></div> <script> $("#progress-bar").progressbar(); $("#progress-bar").progressbar("refresh"); </script>
value
Gets or sets a value.
number value ( number? value)
Since: 2.3
Returns the progress bar value or sets the value.
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
value | number | Optional | New progress bar value. |
Return value:
Type | Description |
---|---|
number | In the get mode, returns the current progress value. |
Code example (TAU API RECOMMENDED):
<div id="progress-bar"></div> <script> var element = document.getElementById("progress-bar"), progressBarWidget = tau.widget.ProgressBar(element), // Returns current value value = progressBarWidget.value(); progressBarWidget.value(30); // Sets new value to 30 </script>
Code example (jQuery API support for backward compatibility):
<div id="progress-bar"></div> <script> $("#progress-bar").progressbar(); // Returns current value $("#progress-bar").progressbar("value"); // Sets new value to 30 $("#progress-bar").progressbar("value", 30); </script>