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');
|
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');
|
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');
|
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');
|
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');
|
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');
|
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');
|
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');
|
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');
|
theme
|
String
|
''
|
Sets the widget's theme.
jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.
In order to set a theme, you need to do the following:
|
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');
|
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');
|
|
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. });
|
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. });
|
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; });
|
|
actualValue
|
Method
|
|
Sets the progress bar's value.
Code examples
Invoke the actualValue method.
//@param Number
$('#jqxProgressBar').jqxProgressBar('actualValue', 50);
|
destroy
|
Method
|
|
Destroys the widget.
Code examples
Invoke the destroy method.
$('#jqxProgressBar').jqxProgressBar('destroy');
|
val
|
Method
|
|
Sets or gets the value.
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);
|