Progressbar Widget version added: 1.6
Description: Display status of a determinate or indeterminate process.
The progress bar is designed to display the current percent complete for a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside its parent container by default.
A determinate progress bar should only be used in situations where the system can accurately update the current status. A determinate progress bar should never fill from left to right, then loop back to empty for a single process — if the actual status cannot be calculated, an indeterminate progress bar should be used to provide user feedback.
Dependencies
Additional Notes:
- This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
Options
disabledType: Boolean
false
true
.Initialize the progressbar with the disabled option specified:
1
|
|
Get or set the disabled option, after initialization:
1
2
3
4
5
|
|
maxType: Number
100
Initialize the progressbar with the max option specified:
1
|
|
Get or set the max option, after initialization:
1
2
3
4
5
|
|
valueType: Number or Boolean
0
- Number: A value between
0
and themax
. - Boolean: Value can be set to
false
to create an indeterminate progressbar.
Initialize the progressbar with the value option specified:
1 |
|
Get or set the value option, after initialization:
1 2 3 4 5 |
|
Methods
destroy()
-
This method does not accept any arguments.
Invoke the destroy method:
1
|
|
disable()
-
This method does not accept any arguments.
Invoke the disable method:
1
|
|
enable()
-
This method does not accept any arguments.
Invoke the enable method:
1
|
|
option( optionName )Returns: Object
optionName
.-
optionNameType: StringThe name of the option to get.
Invoke the method:
1
|
|
option()Returns: PlainObject
-
This method does not accept any arguments.
Invoke the method:
1
|
|
option( optionName, value )
optionName
.-
optionNameType: StringThe name of the option to set.
-
valueType: ObjectA value to set for the option.
Invoke the method:
1
|
|
option( options )
-
optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
1
|
|
widget()Returns: jQuery
jQuery
object containing the progressbar.-
This method does not accept any arguments.
Invoke the widget method:
1
|
|
Events
change( event, ui )Type: progressbarchange
Initialize the progressbar with the change callback specified:
1
2
3
|
|
Bind an event listener to the progressbarchange event:
1
|
|
complete( event, ui )Type: progressbarcomplete
Initialize the progressbar with the complete callback specified:
1
2
3
|
|
Bind an event listener to the progressbarcomplete event:
1
|
|
create( event, ui )Type: progressbarcreate
Initialize the progressbar with the create callback specified:
1
2
3
|
|
Bind an event listener to the progressbarcreate event:
1
|
|
Examples:
Example: A simple jQuery UI Progressbar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
|
Example: A simple jQuery UI Indeterminate Progressbar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
|