JqueryUI: Widget - Progressbar

Options

disabled

This option when setting to true disables the progress bars. By default its value is false.

$( ".selector" ).progressbar({ disabled: true });

max

This option sets the maximum value for a progress bar. By default its value is 100.

$( ".selector" ).progressbar({ max: 500});

value

This option specifies the initial value of the progress bar. By default its value is 0.

$( ".selector" ).progressbar({ value: 20 });

Methods

destroy

This action removes the progress bar functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.

$( ".selector" ).progressbar("destroy");

disable

This action disables the progress bar functionality of an element. This method does not accept any arguments.

$( ".selector" ).progressbar("disable");

enable

This action enables the progress bar functionality. This method does not accept any arguments.

$( ".selector" ).progressbar("enable");

instance()

This action retrieves the progressbar’s instance object. If the element does not have an associated instance, undefined is returned.

$( ".selector" ).progressbar( "instance" );

option( optionName )

This action retrieves the value currently associated with specified optionName. Where optionName is a String

var isDisabled = $( ".selector" ).progressbar( "option", "disabled

option

This action gets an object containing key/value pairs representing the current progress bar options hash. This method does not accept any arguments.

var options = $( ".selector" ).progressbar( "option" );

option( optionName, value )

This action sets the value of the progressbar option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.

$( ".selector" ).progressbar( "option", "disabled", true );

option( options )

This action sets one or more options for the progress bars. The argument options is a map of option-value pairs to be set.

( ".selector" ).progressbar( "option", { disabled: true } );

value

This action retrieves the current value of options.value, that is, the percentage of fill in the progress bar.

$( ".selector" ).progressbar("value");

value( value )

This action specifies a new value to the percentage filled in the progress bar. The argument value can be a Number or Boolean.

$( ".selector" ).progressbar( "value", 50 );

widget

This action returns a jQuery object containing the progress bar. This method does not accept any arguments.

$( ".selector" ).progressbar("widget");

Events

change(event, ui)

This event is triggered whenever the value of progress bar changes. Where event is of type Event, and ui is of type Object.

$( ".selector" ).progressbar({
   change: function( event, ui ) {}
});

complete(event, ui)

>This event is triggered when the progress bar reaches the maximum value. Where event is of type Event, and ui is of type Object.

$( ".selector" ).progressbar({
   complete: function( event, ui ) {}
});

create(event, ui)

This event is triggered whenever progressbar is created. Where event is of type Event, and ui is of type Object.

$( ".selector" ).progressbar({
   create: function( event, ui ) {}
});