Specifies the interval between two Click events. This property is available only in the jqxRepeatButton. The jqxRepeatButton raises Click events repeatedly when the button is pressed.

Code examples

Set the delay property.

$("#jqxButton").jqxRepeatButton({ delay: 25});

Get the delay property.

var delayed = $('#jqxButton').jqxRepeatButton('delay');

Enables or disables the button.

Code examples

Set the disabled property.

$('#jqxButton').jqxButton({disabled: false });

Get the disable property.

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

Sets or gets the button's height.

Code examples

Set the height property.

$('#jqxButton').jqxButton({ height: '25px' }); 

Get the height property.

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

Sets or gets the button's image source.

Code examples

Set the imgSrc property.

$('#jqxButton').jqxButton({ imgSrc: '../../images/andrew.png' }); 

Get the imgSrc property.

var imgSrc = $('#jqxButton').jqxButton('imgSrc');

Sets or gets the button's image width.

Code examples

Set the imgWidth property.

$('#jqxButton').jqxButton({imgWidth: 16, imgSrc: '../../images/andrew.png' }); 

Get the imgWidth property.

var imgWidth = $('#jqxButton').jqxButton('imgWidth');

Sets or gets the button's image height.

Code examples

Set the imgHeight property.

$('#jqxButton').jqxButton({imgHeight: 16, imgSrc: '../../images/andrew.png' }); 

Get the imgHeight property.

var imgHeight = $('#jqxButton').jqxButton('imgHeight');

Sets or gets the button's image position. Possible values: "left", "top", "center", "bottom", "right", "topLeft", "bottomLeft", "topRight", "bottomRight".

Code examples

Set the imgPosition property.

$('#jqxButton').jqxButton({imgPosition: "left", imgSrc: '../../images/andrew.png' }); 

Get the imgPosition property.

var imgPosition = $('#jqxButton').jqxButton('imgPosition');

Enables or disables the rounded corners functionality. This property setting has effect in browsers which support CSS border-radius.

Possible Values:

'all' - for all corners

'top'- for top corners

'bottom' - for bottom corners

'left' - for left corners

'right' - for right corners

'top-right' - for top right corners

'top-left' - for top left corners

'bottom-right' - for bottom right corners

'bottom-left' - for bottom left corners

Code examples

Set the roundedCorners property.

$("#jqxButton").jqxButton({ roundedCorners: 'jqx-rc-t'});

Get the roundedCorners property.

var roundedCourners = $('#jqxButton').jqxButton('roundedCorners');

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.

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

Get the rtl property.

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

Sets or gets the button's text position. Possible values: "left", "top", "center", "bottom", "right", "topLeft", "bottomLeft", "topRight", "bottomRight".

Code examples

Set the textPosition property.

$('#jqxButton').jqxButton({textPosition: "left"}); 

Get the textPosition property.

var textPosition = $('#jqxButton').jqxButton('textPosition');

Sets or gets the button's text image relation. Possible values: "imageBeforeText", "imageAboveText", "textAboveImage", "textBeforeImage" and "overlay".

Code examples

Set the imageBeforeText property.

$('#jqxButton').jqxButton({textImageRelation: "imageBeforeText"}); 

Get the imageBeforeText property.

var imageBeforeText = $('#jqxButton').jqxButton('imageBeforeText');

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:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
  
  

• Set the widget's theme property to 'energyblue' when you initialize it.

Determines the button's template as an alternative of the default styles.

Possible Values:

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

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

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

'warning' - orange button which indicates caution.

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

'inverse' - dark gray button, not tied to a semantic action or use.

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

'link' - making it look like a link .

Code examples

Set the template property.

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

Get the template property.

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

Sets or gets the button's toggle state. ( available in jqxToggleButton ).

Code examples

Set the toggled property.

$('#jqxButton').jqxToggleButton({ toggled: true }); 

Get the toggled property.

var toggled = $('#jqxButton').jqxToggleButton('toggled');

Sets ot gets the button's width.

Code examples

Set the width property.

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

Get the width property.

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

Sets or gets the button's value.

Code examples

Set the value property.

$('#jqxButton').jqxButton({value: "Button"}); 

Get the textPosition property.

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

This event is triggered when the button is clicked.

Code examples

Bind to the click event by type: jqxButton.

$('#jqxButton').on('click', function () { // Some code here. }); 

Checks the button. ( available in jqxToggleButton ).

Code examples

Invoke the check method.

$('#jqxButton').jqxToggleButton('check'); 

Destroys the widget.

Code examples

Invoke the destroy method.

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

Focuses the widget.

Code examples

Invoke the focus method.

$('#jqxButton').jqxButton('focus'); 

Renders the widget.

Code examples

Invoke the render method.

$('#jqxButton').jqxButton('render'); 

Toggles the button's checked state. ( available in jqxToggleButton ).

Code examples

Invoke the toggle method.

$('#jqxButton').jqxToggleButton('toggle'); 

Unchecks the button. ( available in jqxToggleButton ).

Code examples

Invoke the unCheck method.

$('#jqxButton').jqxToggleButton('unCheck'); 

Sets or gets the value.

Code example

Invoke the val method.

// Get the value.

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

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

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

// Set value.

$("#jqxButton").jqxButton('val', "New Value");

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

$("#jqxButton").val("New Value");