Progressbar Widgetversion added: 1.6
Description: Display status of a determinate process.
Options
Methods
destroy()
Removes the progressbar functionality completely. This will return the element back to its pre-init state.
disable()
Disables the progressbar.
enable()
Enables the progressbar.
option( optionName ) Returns: Object
Gets the value currently associated with the specified
optionName.-
optionNameType: StringThe name of the option to get.
option() Returns: PlainObject
Gets an object containing key/value pairs representing the current progressbar options hash.
option( optionName, value )
Sets the value of the progressbar option associated with the specified
optionName.option( options )
Sets one or more options for the progressbar.
-
optionsType: ObjectA map of option-value pairs to set.
value() Returns: Number
Gets the current value of the progressbar.
widget() Returns: jQuery
Returns a
jQuery object containing the progressbar.
Events
change( event, ui )
Triggered when the value of the progressbar changes.
complete( event, ui )
Triggered when the value of the progressbar reaches the maximum value.
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.
This is a determinate progress bar, meaning that it 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 or spinner animation is a better way to provide user feedback.
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.
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 | <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>progressbar demo</title></head><body><div id="progressbar"></div><script>$( "#progressbar" ).progressbar({ value: 37});</script></body></html> |