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