Progress Bar

The progress bar component shows a control that indicates the progress percentage of an on-going operation.

Table of Contents

1. Default Selectors
2. Manual Constructor
3. HTML Examples
4. Options
5. Events
6. Methods

Default Selectors

By default, all elements with the data-role="progressbar" attribute are displayed as progress bars.

Manual Constructor

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.

HTML Examples

To create a simple progress bar:

<div id="progress-bar" data-role="progressbar"></div>

Options

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.

Events

The following table lists the events related to the progress bar component.

Methods

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, ...);
  

Summary

ProgressBar refresh (  ) 

number value ( number? 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>