Progressbar Widgetversion 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.
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:
$( ".selector" ).progressbar({ disabled: true }); |
Get or set the disabled option, after initialization:
// gettervar disabled = $( ".selector" ).progressbar( "option", "disabled" );// setter$( ".selector" ).progressbar( "option", "disabled", true ); |
maxType: Number
100
Initialize the progressbar with the max option specified:
$( ".selector" ).progressbar({ max: 1024 }); |
Get or set the max option, after initialization:
// gettervar max = $( ".selector" ).progressbar( "option", "max" );// setter$( ".selector" ).progressbar( "option", "max", 1024 ); |
valueType: Number or Boolean
0
-
Number:
A value between
0and themax. -
Boolean:
Value can be set to
falseto create an indeterminate progressbar.
Initialize the progressbar with the value option specified:
$( ".selector" ).progressbar({ value: 25 }); |
Get or set the value option, after initialization:
// gettervar value = $( ".selector" ).progressbar( "option", "value" );// setter$( ".selector" ).progressbar( "option", "value", 25 ); |
Methods
destroy()
- This method does not accept any arguments.
Invoke the destroy method:
$( ".selector" ).progressbar( "destroy" ); |
disable()
- This method does not accept any arguments.
Invoke the disable method:
$( ".selector" ).progressbar( "disable" ); |
enable()
- This method does not accept any arguments.
Invoke the enable method:
$( ".selector" ).progressbar( "enable" ); |
option( optionName )Returns: Object
optionName.-
optionNameType: StringThe name of the option to get.
Invoke the method:
var isDisabled = $( ".selector" ).progressbar( "option", "disabled" ); |
option()Returns: PlainObject
- This method does not accept any arguments.
Invoke the method:
var options = $( ".selector" ).progressbar( "option" ); |
option( optionName, value )
optionName.-
optionNameType: StringThe name of the option to set.
-
valueType: ObjectA value to set for the option.
Invoke the method:
$( ".selector" ).progressbar( "option", "disabled", true ); |
option( options )
-
optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
$( ".selector" ).progressbar( "option", { disabled: true } ); |
widget()Returns: jQuery
jQuery object containing the progressbar.
- This method does not accept any arguments.
Invoke the widget method:
var widget = $( ".selector" ).progressbar( "widget" ); |
Events
change( event, ui )Type: progressbarchange
Initialize the progressbar with the change callback specified:
$( ".selector" ).progressbar({ change: function( event, ui ) {}}); |
Bind an event listener to the progressbarchange event:
$( ".selector" ).on( "progressbarchange", function( event, ui ) {} ); |
complete( event, ui )Type: progressbarcomplete
Initialize the progressbar with the complete callback specified:
$( ".selector" ).progressbar({ complete: function( event, ui ) {}}); |
Bind an event listener to the progressbarcomplete event:
$( ".selector" ).on( "progressbarcomplete", function( event, ui ) {} ); |
create( event, ui )Type: progressbarcreate
Initialize the progressbar with the create callback specified:
$( ".selector" ).progressbar({ create: function( event, ui ) {}}); |
Bind an event listener to the progressbarcreate event:
$( ".selector" ).on( "progressbarcreate", function( event, ui ) {} ); |
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 | <!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> |
Demo:
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 | <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>progressbar demo</title></head><body><div id="progressbar"></div><script>$( "#progressbar" ).progressbar({ value: false});</script></body></html> |