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 button's height.

Code examples

Set the height property.

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

Get the height property.

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

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

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

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.

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 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 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 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 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 delay of the 'close' animation.

Code example

Set the closeDelay property

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

Get the closeDelay property.

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

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

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

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

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

Code examples

Invoke the setContent method.

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

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

Hides the button's content.

Code examples

Invoke the close method.

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

Focuses the widget.

Code examples

Invoke the focus method.

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

Destroys the widget.

Code examples

Invoke the destroy method.

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