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 ); |
maxType: Number
0
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
0
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.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 } ); |
value() Returns: Number
- This method does not accept any arguments.
Invoke the method:
var progressSoFar = $( ".selector" ).progressbar( "value" ); |
Invoke the method:
$( ".selector" ).progressbar( "value", 50 ); |
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 ) {} ); |
Overview
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> |