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

Sets or gets the check state.

Code examples

Set the checked property.

$('#jqxSwitchButton').jqxSwitchButton({ checked:true }); 

Get the checked property.

var checked = $('#jqxSwitchButton').jqxSwitchButton('checked');

Sets or gets whether the switch button is disabled.

Code examples

Set the disabled property.

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

Get the disabled property.

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

Sets or gets the height.

Code examples

Set the height property .

$('#jqxSwitchButton').jqxSwitchButton({height:"400px"});

Get the height property.

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

Determines the jqxSwitchButton's orientation.

Possible Values:

'horizontal' 

'vertical'

Code examples

Set the orientation property.

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

Get the orientation property.

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

Sets or gets the string displayed when the button is checked.

Code examples

Set the onLabel property.

$('#jqxSwitchButton').jqxSwitchButton({ onLabel:'ON' }); 

Get the onLabel property.

var onLabel = $('#jqxSwitchButton').jqxSwitchButton('onLabel');

Sets or gets the string displayed when the button is unchecked.

Code examples

Set the offLabel property.

$('#jqxSwitchButton').jqxSwitchButton({ offLabel:'OFF' }); 

Get the offLabel property.

var offLabel = $('#jqxSwitchButton').jqxSwitchButton('offLabel');

Sets or gets the size of the thumb in percentages.

Code examples

Set the thumbSize property.

$('#jqxSwitchButton').jqxSwitchButton({ thumbSize:'50%' }); 

Get the thumbSize property.

var thumbSize = $('#jqxSwitchButton').jqxSwitchButton('thumbSize');

Sets or gets the width.

Code examples

Set the width property.

$('#jqxSwitchButton').jqxSwitchButton({width:"200px"});

Get the width property.

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

This event is triggered when the switch button is checked.

Code examples

Bind to the checked event by type: jqxSwitchButton.

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

This event is triggered when the switch button's state changes from one state to another.

Code examples

Bind to the change event by type: jqxSwitchButton.

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

This event is triggered when the switch button is unchecked.

Code examples

Bind to the unchecked event by type: jqxSwitchButton.

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

Checks the button.

Code example

Invoke the check method.

$('#jqxSwitchButton').jqxSwitchButton('check');

Disables the switch button.

Code example

Invoke the disable method.

$('#jqxSwitchButton').jqxSwitchButton('disable');

Enables the switch button.

Code example

Invoke the enable method.

$('#jqxSwitchButton').jqxSwitchButton('enable');

Toggles the check state. This method is automatically called when the user clicks the switch button.

Code example

Invoke the toggle method.

$('#jqxSwitchButton').jqxSwitchButton('toggle');

Unchecks the button.

Code example

Invoke the uncheck method.

$('#jqxSwitchButton').jqxSwitchButton('uncheck');

Sets or gets the value.

Code example

Invoke the val method.

// Get the value.

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

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

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

// Set value.

$("#jqxSwitchButton").jqxSwitchButton('val', true);

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

$("#jqxSwitchButton").val(true);

Sets or gets the type of the animation.

Possible Values:

'fade'

'slide'

'none'

Code example

Set the animationType property

$('#jqxDropDownButton').jqxDropDownButton({animationType: 'none'});

Get the animationType property.

var animationType = $('#jqxDropDownButton').jqxDropDownButton('animationType');

Sets or gets whether the DropDown is automatically opened when the mouse cursor is moved over the widget.

Code example

Set the autoOpen property.

$("#jqxDropDownButton").jqxDropDownButton({ autoOpen: true });
				

Get the autoOpen property.

var autoOpen = $('#jqxDropDownButton').jqxDropDownButton('autoOpen');

Sets or gets the delay of the 'close' animation.

Code example

Set the closeDelay property

$('#jqxDropDownButton').jqxDropDownButton({closeDelay: 200});

Get the closeDelay property.

var closeDelay = $('#jqxDropDownButton').jqxDropDownButton('closeDelay');

Enables or disables the dropDownButton.

Code examples

Set the disabled property.

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

Get the disabled property.

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

Sets or gets the DropDown's alignment.

Possible values:

'left' 

'right'

Code example

$('#jqxDropDownButton').jqxDropDownButton({ dropDownHorizontalAlignment: 'right'}); 

Get the dropDownHorizontalAlignment property.

var dropDownHorizontalAlignment = $('#jqxDropDownButton').jqxDropDownButton('dropDownHorizontalAlignment');

Sets or gets the DropDown's alignment.

Possible Values:

'top'

'bottom'

Code example

$('#jqxDropDownButton').jqxDropDownButton({ dropDownVerticalAlignment: 'top'}); 

Get the dropDownVerticalAlignment property.

var dropDownVerticalAlignment = $('#jqxDropDownButton').jqxDropDownButton('dropDownVerticalAlignment');

When this property is set to true, the popup may open above the button, if there's not enough available space below the button.

Code example

Set the enableBrowserBoundsDetection property.

$('#jqxDropDownButton').jqxDropDownButton({ enableBrowserBoundsDetection: false}); 

Get the enableBrowserBoundsDetection property.

var enableBrowserBoundsDetection = 
$('#jqxDropDownButton').jqxDropDownButton('enableBrowserBoundsDetection');

Sets or gets the button's height.

Code examples

Set the height property.

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

Get the height property.

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

Sets a function which initializes the button's content.

Code examples

Set the initContent property.

$('#jqxDropDownButton').jqxDropDownButton({ initContent: function() { }}); 

Sets or gets the delay of the 'open' animation.

Code example

Set the openDelay property

$('#jqxDropDownButton').jqxDropDownButton({openDelay: 200});

Get the openDelay property.

var openDelay = $('#jqxDropDownButton').jqxDropDownButton('openDelay');

Sets or gets the popup's z-index.

Code example

Set the popupZIndex property.

$("#jqxDropDownButton").jqxDropDownButton({popupZIndex: 999999});

Get the popupZIndex property.

var zIndex = $('#jqxDropDownButton').jqxDropDownButton('popupZIndex'); 

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.

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

Get the rtl property.

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

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.

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

Get the template property.

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

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

Code examples

Set the width property.

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

Get the width property.

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

This event is triggered when the button's popup is closed.

Code examples

Bind to the close event by type: jqxDropDownButton.

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

This event is triggered when the button's popup is opened.

Code examples

Bind to the open event by type: jqxDropDownButton.

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

Hides the button's content.

Code examples

Invoke the close method.

$('#jqxDropDownButton').jqxDropDownButton('close'); 

Destroys the widget.

Code examples

Invoke the destroy method.

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

Focuses the widget.

Code examples

Invoke the focus method.

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

Gets the button's content. The returned value is the button's content set through the "setContent" method.

Code examples

Invoke the getContent method.

var content = $('#jqxDropDownButton').jqxDropDownButton('getContent'); 

Returns true, if the drop down is opened. Otherwise returns false.

Code example

Invoke the isOpened method.

var opened = $("#jqxDropDownButton").jqxDropDownButton('isOpened' ); 

Shows the button's content.

Code examples

Invoke the open method.

$('#jqxDropDownButton').jqxDropDownButton('open'); 

Sets the button's content. The parameter could be a "string" or "html".

Code examples

Invoke the setContent method.

$('#jqxDropDownButton').jqxDropDownButton('setContent', 'my content'); 

Enables or disables the jqxButtonGroup.

Code examples

Set the disabled property.

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

Get the disabled property.

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

Enables or disabled the highlight state.

Code examples

Set the enableHover property.

$('#jqxButtonGroup').jqxButtonGroup({enableHover: true });

Get the enableHover property.

var enableHover = $('#jqxButtonGroup').jqxButtonGroup('enableHover');

Sets or gets the jqxButtonGroup's mode.

Possible Values:

'checkbox'

'radio'

'default'

Code examples

Set the mode property.

$('#jqxButtonGroup').jqxButtonGroup({mode: 'radio' });

Get the mode property.

var mode = $('#jqxButtonGroup').jqxButtonGroup('mode');

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.

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

Get the rtl property.

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

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.

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

Get the template property.

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

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.

This event is triggered when a button is clicked.

Code examples

Bind to the buttonclick event by type: jqxButtonGroup.

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

This event is triggered when a button is selected - in checkboxes or radio buttons mode.

Code examples

Bind to the selected event by type: jqxButtonGroup.

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

This event is triggered when a button is unselected - in checkbox or radio buttons mode.

Code examples

Bind to the unselected event by type: jqxButtonGroup.

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

Disables a button at specific index.

Code examples

Invoke the disableAt method.

$('#jqxButtonGroup').jqxButtonGroup('disableAt', 0); 

Disables jqxButtonGroup.

Code examples

Invoke the disable method.

$('#jqxButtonGroup').jqxButtonGroup('disable'); 

Destroys the widget.

Code examples

Invoke the destroy method.

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

Enables the jqxButtonGroup.

Code examples

Invoke the enable method.

$('#jqxButtonGroup').jqxButtonGroup('enable'); 

Enables a button at specific index.

Code examples

Invoke the enableAt method.

$('#jqxButtonGroup').jqxButtonGroup('enableAt', 0); 

Focuses the widget.

Code examples

Invoke the focus method.

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

Gets the index or indexes of the selected button(s).

• Returns undefined when the "mode" property is "default".
• Returns the index of the selected button when the "mode" property is set the "radio". For example, if the first button is selected, the retuned value is 0.
• Returns an array of the selected buttons when the "mode" property is set to "checkbox". For example, if you have a group of three buttons and the first and third buttons are selected, the returned value will be [0, 2]

Code examples

Invoke the getSelection method.

var jqxButtonGroup = $('#jqxButtonGroup').jqxButtonGroup('getSelection'); 

Renders the widget.

Code examples

Invoke the render method.

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

Selects a button in checkbox or radio buttons mode

Code examples

Invoke the setSelection method. The index is zero-based. For selecting the first button, call the method with 0.

$('#jqxButtonGroup').jqxButtonGroup('setSelection', 0);