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:
// getter var 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 > |