Progressbar Widgetversion added: 1.6
Description: Display status of a determinate process.
Options
disabledType: Boolean
false
true.Initialize the progressbar with the disabled option specified:
$( ".selector" ).progressbar({ disabled: true }); |
Get or set the disabled option, after initialization:
// gettervar disabled = $( ".selector" ).progressbar( "option", "disabled" );// setter$( ".selector" ).progressbar( "option", "disabled", true ); |
Methods
destroy()
- This method does not accept any arguments.
disable()
- This method does not accept any arguments.
enable()
- This method does not accept any arguments.
option( optionName ) Returns: Object
optionName.-
optionNameType: StringThe name of the option to get.
option() Returns: PlainObject
- This method does not accept any arguments.
option( optionName, value )
optionName.option( options )
-
optionsType: ObjectA map of option-value pairs to set.
value() Returns: Number
- This method does not accept any arguments.
widget() Returns: jQuery
jQuery object containing the progressbar.
- This method does not accept any arguments.
Events
change( event, ui )
complete( event, ui )
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> |