Name
|
Type
|
Default
|
animationType
|
String
|
'slide'
|
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');
|
autoOpen
|
Boolean
|
false
|
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');
|
closeDelay
|
Number
|
400
|
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');
|
disabled
|
Boolean
|
false
|
Enables or disables the dropDownButton.
Code examples
Set the disabled property.
$('#jqxDropDownButton').jqxDropDownButton({disabled: false });
Get the disabled property.
var disabled = $('#jqxDropDownButton').jqxDropDownButton('disabled');
|
dropDownHorizontalAlignment
|
String
|
'left'
|
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');
|
enableBrowserBoundsDetection
|
Boolean
|
false
|
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');
|
height
|
Number/String
|
null
|
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');
|
initContent
|
Function
|
null
|
Sets a function which initializes the button's content.
Code examples
Set the initContent property.
$('#jqxDropDownButton').jqxDropDownButton({ initContent: function() { }});
|
openDelay
|
Number
|
350
|
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');
|
popupZIndex
|
Number
|
20000
|
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');
|
rtl
|
Boolean
|
false
|
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');
|
theme
|
String
|
''
|
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:
|
width
|
Number/String
|
null
|
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');
|
|
close
|
Event
|
|
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. });
|
open
|
Event
|
|
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. });
|
|
close
|
Method
|
|
Hides the button's content.
Code examples
Invoke the close method.
$('#jqxDropDownButton').jqxDropDownButton('close');
|
destroy
|
Method
|
|
Destroys the widget.
Code examples
Invoke the destroy method.
$('#jqxDropDownButton').jqxDropDownButton('destroy');
|
focus
|
Method
|
|
Focuses the widget.
Code examples
Invoke the focus method.
$('#jqxDropDownButton').jqxDropDownButton('focus');
|
getContent
|
Method
|
|
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');
|
isOpened
|
Method
|
|
Returns true, if the popup is opened. Otherwise returns false.
Code example
Invoke the isOpened method.
var opened = $("#jqxDropDownButton").jqxDropDownButton('isOpened' );
|
open
|
Method
|
|
Shows the button's content.
Code examples
Invoke the open method.
$('#jqxDropDownButton').jqxDropDownButton('open');
|
setContent
|
Method
|
|
Sets the button's content. The parameter could be a "string" or "html".
Code examples
Invoke the setContent method.
$('#jqxDropDownButton').jqxDropDownButton('setContent', 'my content');
|