The progress component shows that an operation is in progress.
By default, all elements with the data-role="progress"
attribute are displayed as progress components.
To manually create a button component, use the component constructor from the tau
namespace:
<div id="progress"></div> <script> var element = document.getElementById("progress"), progress = tau.widget.Progress(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"></div> <script> $("#progress").progress(); </script>
To create a simple progress component:
<div id="progress" data-role="progress"></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-running | boolean | true | Sets whether the progress component is running. |
data-style | "circle" | "pending" | "pending" | Object with the default options. |
To call a method on the component, use one of the existing APIs:
TAU API (RECOMMENDED):
<div id="progress"></div> <script> var element = document.getElementById("progress"), progress = tau.widget.Progress(element); // progress.methodName(argument1, argument2, ...); // For example progress.show(); </script>
jQuery API (support for backward compatibility):
<div id="progress"></div> <script> $("#progress").progress(); // $(".selector").progress("methodName", argument1, argument2, ...); // For example $("#progress").progress("show"); </script>
Method | Description |
---|---|
hide ( ) |
Hides the component. |
Progress refresh ( ) |
Refreshes the progress. |
running ( boolean flag ) |
Starts or stops running the progress. |
show ( ) |
Shows the component. |
hide
Hides the component.
hide ( )
Return value:
No return valueCode example (TAU API RECOMMENDED):
<div id="progress"></div> <script> var element = document.getElementById("progress"), progressWidget = tau.widget.Progress(element); progressWidget.hide(); </script>
Code example (jQuery API support for backward compatibility):
<div id="progress"></div> <script> $("#progress").progress(); $("#progress").progress("hide"); </script>
refresh
Refreshes the progress.
Progress refresh ( )
The method rebuilds the DOM structure of the progress 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 |
---|---|
Progress | Returns this. |
Code example (TAU API RECOMMENDED):
$("#progress").progress(); <div id="progress"></div> <script> var element = document.getElementById("progress"), progressWidget = tau.widget.Progress(element); progressWidget.refresh(); // Is also called after progressWidget.option("running", true); </script>
Code example (jQuery API support for backward compatibility):
<div id="progress"></div> <script> $("#progress").progress(); $("#progress").progress("refresh"); </script>
running
Starts or stops running the progress.
running ( boolean flag)
Parameters:
Parameter | Type | Required/optional | Default value | Description |
---|---|---|---|---|
flag | boolean | Required | If true , the progress component is set to run. |
Return value:
No return valueCode example (TAU API RECOMMENDED):
<div id="progress"></div> <script> var element = document.getElementById("progress"), progressWidget = tau.widget.Progress(element), // Return current state of running value = progressWidget.running(); progressWidget.running(true); // Starts running progressWidget.running(false); // Stops running </script>
Code example (jQuery API support for backward compatibility):
<div id="progress"></div> <script> $("#progress").progress(); // Return current state of running $("#progress").progress("running"); // Starts running $("#progress").progress("running", true); // Stops running $("#progress").progress("running", false); </script>
show
Shows the component.
show ( )
Return value:
No return valueCode example (TAU API RECOMMENDED):
<div id="progress"></div> <script> var element = document.getElementById("progress"), progressWidget = tau.widget.Progress(element); progressWidget.show(); </script>
Code example (jQuery API support for backward compatibility):
<div id="progress"></div> <script> $("#progress").progress(); $("#progress").progress("show"); </script>