jQuery ProgressBar API

Name Type Default

animationDuration Number 300

Determines the duration of the progressbar's animation.

Code examples

Set the animationDuration property.

$('#jqxProgressBar').jqxProgressBar({ animationDuration: 0 });

Get the animationDuration property.

var animationDuration = $('#jqxProgressBar').jqxProgressBar('animationDuration');

Try it: animationDuration is set to 3000

colorRanges Array []

Determines different color segments.

Code examples

Set the colorRanges property.


$('#jqxProgressBar').jqxProgressBar({
    colorRanges: [
        { stop: 20, color: '#F4D1D1' },
        { stop: 70, color: '#FF00FF' }
    ]
});

colorRanges Properties:

stop - each one color start from zero to particular position. With decimal number is set a concrete stop. Possible values from ProgressBar's min to max.
color - color of this segment.

Get the colorRanges property.

var colorRanges = $('#jqxProgressBar').jqxProgressBar('colorRanges');

Try it: set custom colorRanges

disabled Boolean false

Determines whether the progress bar is disabled.

Code examples

Set the disabled property.

$('#jqxProgressBar').jqxProgressBar({disabled:true});

Get the disabled property.

var disabled = $('#jqxProgressBar').jqxProgressBar('disabled');

Try it: disabled is set to true

height Number/String null

Sets or gets the progress bar's height.

Code examples

Set the height property.

$('#jqxProgressBar').jqxProgressBar({height:"100px"  });

Get the height property.

var height = $('#jqxProgressBar').jqxProgressBar('height');

Try it: height is set to 20

layout String "normal"

Sets or gets the jqxProgressBar's layout.

Possible Values:

'normal'

'reverse'-the slider is filled from right-to-left(horizontal progressbar) and from top-to-bottom(vertical progressbar)

Code examples

Set the layout property.

$('#jqxProgressBar').jqxProgressBar({ layout: "reverse" });

Get the layout property.

var layout = $('#jqxProgressBar').jqxProgressBar('layout');

Try it: layout is set to 'reverse'

max Number 100

Sets or gets the progress bar's max value.

Code examples

Set the max property.

$('#jqxProgressBar').jqxProgressBar({  max: 150 });

Get the max property.

var max = $('#jqxProgressBar').jqxProgressBar('max');

Try it: max is set to 150

min Number 0

Sets or gets the progress bar's min value.

Code examples

Set the min property.

$('#jqxProgressBar').jqxProgressBar({ min: 10 });

Get the min property.

var min = $('#jqxProgressBar').jqxProgressBar('min');

Try it: min is set to 10

orientation String 'horizontal'

Sets or gets the orientation.

Possible Values:

'vertical'

'horizontal'

Code examples

Set the orientation property.

$('#jqxProgressBar').jqxProgressBar({orientation: "vertical"  });

Get the orientation property.

var orientation = $('#jqxProgressBar').jqxProgressBar('orientation');

Try it: orientation is set to 'vertical'

rtl Boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxProgressBar').jqxProgressBar({rtl : true});

Get the rtl property.

var rtl = $('#jqxProgressBar').jqxProgressBar('rtl');

Try it: rtl is set to true

showText Boolean false

Sets or gets the visibility of the progress bar's percentage's text.

Code examples

Set the showText property.

$('#jqxProgressBar').jqxProgressBar({showText:true});

Get the showText property.

var showText = $('#jqxProgressBar').jqxProgressBar('showText');

Try it: showText is set to true

template String 'default'

Determines the template as an alternative of the default styles.

Possible Values:

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

Code examples

Set the template property.

$("#jqxProgressBar").jqxProgressBar({ template: 'primary'});

Get the template property.

var template = $('#jqxProgressBar').jqxProgressBar('template');

Try it: template is set to 'success'

theme String ''

value Number 0

Sets or gets the progress bar's value The value should be set between min(default value: 0) and max(default value: 100).

Code examples

Set the value property.

$('#jqxProgressBar').jqxProgressBar({  value: 100});

Get the value property.

var value = $('#jqxProgressBar').jqxProgressBar('value');

Try it: value is set to 50

width Number/String null

Sets or gets the progress bar's width.

Code examples

Set the width property.

$('#jqxProgressBar').jqxProgressBar({width:"250px"  });

Get the width property.

var width = $('#jqxProgressBar').jqxProgressBar('width');

Try it: width is set to 200

complete Event

This event is triggered when the value is equal to the max. value.

Code examples

Bind to the complete event by type: jqxProgressBar.

$('#jqxProgressBar').on('complete', function (event) { // Some code here. });

Try it: Bind to the complete event by type: jqxProgressBar.

invalidvalue Event

This event is triggered when the user enters an invalid value( value which is not Number or is out of the min - max range. )

Code examples

Bind to the invalidvalue event by type: jqxProgressBar.

$('#jqxProgressBar').on('invalidvalue', function (event) { // Some code here. });

Try it: Bind to the invalidvalue event by type: jqxProgressBar.

valueChanged Event

This event is triggered when the value is changed.

Code examples

Bind to the valueChanged event by type: jqxProgressBar.

$('#jqxProgressBar').on('valueChanged', function (event) { var value = event.currentValue; });

Try it: Bind to the valuechanged event by type: jqxProgressBar.

actualValue Method

Sets the progress bar's value.

Parameter	Type	Description
value	Number

Return Value
None

Code examples

Invoke the actualValue method.

//@param Number

$('#jqxProgressBar').jqxProgressBar('actualValue', 50);

Try it: changes the value in the jqxProgressBar.

destroy Method

Destroys the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

$('#jqxProgressBar').jqxProgressBar('destroy');

Try it: destroys the jqxProgressBar.

val Method

Sets or gets the value.

Parameter	Type	Description
value	Number

Return Value
Number

Code example

Invoke the val method.

// Get the value.

var value = $("#jqxProgressBar").jqxProgressBar('val');

// Get the value using jQuery's val()

var value = $("#jqxProgressBar").val();

// Set value.

$("#jqxProgressBar").jqxProgressBar('val', 50);

// Set value using jQuery's val().

$("#jqxProgressBar").val(50);

Try it: sets a new value in the jqxProgressBar.

¿´¿´Å·ÃÀÒ»¼¶ÊÓÆµ¿á¹·

Properties

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code example

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Code examples

Code examples

Methods

Code examples

Code examples

Code example