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');

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 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 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 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.

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');

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. }); 

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

Code examples

Invoke the toggle method.

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

Checks the button. ( available in jqxToggleButton ).

Code examples

Invoke the check method.

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

Unchecks the button. ( available in jqxToggleButton ).

Code examples

Invoke the unCheck method.

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

Focuses the widget.

Code examples

Invoke the focus method.

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

Renders the widget.

Code examples

Invoke the render method.

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

Destroys the widget.

Code examples

Invoke the destroy method.

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

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");