## Properties

Name | Type | Default
--- | --- | ---
width | Number/String | auto
Gets or sets widget's width. #### Code examples Initialize a jqxTabs with the `width` property specified.
    $('#jqxTabs').jqxTabs({width:"200px"});
height | Number/String | auto
Gets or sets widget's height. #### Code examples Initialize a jqxTabs with the `height` property specified.
    $('#jqxTabs').jqxTabs({height:"400px"});
disabled | Boolean | false
Enables or disables the jqxTabs widget. #### Code examples Initialize a jqxTabs with the `disabled` property specified.
    $('#jqxTabs').jqxTabs({ disabled:true });
scrollAnimationDuration | Number | 250
Gets or sets the duration of the scroll animation. #### Code examples Initialize a jqxTabs with the `scrollAnimationDuration` property specified.
    $('#jqxTabs').jqxTabs({ scrollAnimationDuration: 200 });
enabledHover | Boolean | true
Enables or disables the tabs hover effect. #### Code examples Initialize a jqxTabs with the `enabledHover` property specified.
    $('#jqxTabs').jqxTabs({ enabledHover: false });
collapsible | Boolean | false
Enables or disables the collapsible feature. #### Code examples Initialize a jqxTabs with the `collapsible` property specified.
    $('#jqxTabs').jqxTabs({ collapsible: false });
animationType | String | none
Gets or sets the animation type of switching tabs. Possible values ['none', 'fade']. #### Code examples Initialize a jqxTabs with the `animationType` property specified.
    $('#jqxTabs').jqxTabs({ animationType: 'fade' });
enableScrollAnimation | Boolean | true
Gets or sets whether the scroll animation is enabled. #### Code examples Initialize a jqxTabs with the `enableScrollAnimation` property specified.
    $('#jqxTabs').jqxTabs({ enableScrollAnimation:false });
contentTransitionDuration | Number | 450
Gets or sets the duration of the content's fade animation which occurs when the user selects a tab. This setting has effect when the 'animationType' is set to 'fade'. #### Code examples Initialize a jqxTabs with the `contentTransitionDuration` property specified.
    $('#jqxTabs').jqxTabs({ contentTransitionDuration:500 });
toggleMode | String | click
Gets or sets user interaction used for switching the different tabs. Possible values ['click', 'dblclick', 'mouseenter', 'none'] #### Code examples Initialize a jqxTabs with the `toggleMode` property specified.
    $('#jqxTabs').jqxTabs({ toggleMode:'mouseenter' });
selectedItem | Number | 0
Gets or sets selected tab. #### Code examples Initialize a jqxTabs with the `selectedItem` property specified.
    $('#jqxTabs').jqxTabs({ selectedItem: 2 });
position | String | top
Gets or sets whether the tabs are positioned at 'top' or 'bottom.. Possible values ['top', 'bottom']. #### Code examples Initialize a jqxTabs with the `position` property specified.
    $('#jqxTabs').jqxTabs({ position:"bottom" });
selectionTracker | Boolean | false
Gets or sets whether the selection tracker is enabled. #### Code examples Initialize a jqxTabs with the `selectionTracker` property specified.
    $('#jqxTabs').jqxTabs({ selectionTracker:false});
scrollable | Boolean | true
Gets or sets whether the scrolling is enabled. #### Code examples Initialize a jqxTabs with the `scrollable` property specified.
    $('#jqxTabs').jqxTabs({ scrollable:false});
scrollPosition | String | both
Gets or sets the position of the scroll arrows. Possible values ['left', 'right', 'both']. #### Code examples Initialize a jqxTabs with the `scrollPosition` property specified.
    $('#jqxTabs').jqxTabs({ scrollPosition:'right'});
scrollStep | Number | 70
Gets or sets the scrolling step. #### Code examples Initialize a jqxTabs with the `scrollStep` property specified.
    $('#jqxTabs').jqxTabs({ scrollStep:80});
autoHeight | Boolean | true
Gets or sets whether the jqxTabs header's height will be equal to the item with max height. #### Code examples Initialize a jqxTabs with the `autoHeight` property specified.
    $('#jqxTabs').jqxTabs({ autoHeight: false});
showCloseButtons | Boolean | false
Gets or sets whether a close button is displayed in each tab. #### Code examples Initialize a jqxTabs with the `showCloseButtons` property specified.
    $('#jqxTabs').jqxTabs({ showCloseButtons:false});
closeButtonSize | Number | 16
Gets or sets the close button size. #### Code examples Initialize a jqxTabs with the `closeButtonSize` property specified.
    $('#jqxTabs').jqxTabs({ closeButtonSize:20});
initTabContent | function | null
Callback function that the tab calls when a content panel needs to be initialized. #### Code examples Initialize a jqxTabs with the `initTabContent` property specified.
    $('#jqxTabs').jqxTabs({ initTabContent: function(tab)
                                {
                                    // initialize widgets here depending on the tab's index.
                                }
                            });
keyboardNavigation | Boolean | true
Enables or disables the keyboard navigation. #### Code examples Initialize a jqxTabs with the `keyboardNavigation` property specified.
    $('#jqxTabs').jqxTabs({ keyboardNavigation: false});
reorder | Boolean | false
Enables or disables the reorder feature. When this feature is enabled, the end-user can drag a tab and drop it over another tab. As a result the tabs will be reordered. #### Code examples Initialize a jqxTabs with the `reorder` property specified.
    $('#jqxTabs').jqxTabs({reorder:true});
enableDropAnimation | Boolean | false
Gets or sets whether the drop animation is enabled. #### Code examples Initialize a jqxTabs with the `enableDropAnimation` property specified.
    $('#jqxTabs').jqxTabs({enableDropAnimation: true});
dropAnimationDuration | Number | 250
Gets or sets the drop animation duration. #### Code examples Initialize a jqxTabs with the `dropAnimationDuration` property specified.
    $('#jqxTabs').jqxTabs({dropAnimationDuration: 350});
## Events
created | Event |
The 'created' event is triggered when the jqxTabs is created. You should bind to this event before the jqxTabs initialization. #### Code examples Bind to the created event by type: jqxTabs.
    $('#jqxTabs').bind('created', function () { // Some code here. });
selected | Event |
The 'selected' event is triggered when the user selects a new tab. #### Code examples Bind to the selected event by type: jqxTabs.
    $('#jqxTabs').bind('selected', function (event) { var selectedTab = event.args.item; });
tabclick | Event |
The 'tabclick' event is triggered when the user click a tab. You can retrieve the clicked tab's index. #### Code examples Bind to the tabclick event by type: jqxTabs.
      $('#jqxTabs').bind('tabclick', function (event) { var clickedItem = event.args.item; });
add | Event |
The 'add' event is triggered when a new tab is added to the jqxTabs. #### Code examples Bind to the add event by type: jqxTabs.
    $('#jqxTabs').bind('add', function (event) { // Some code here. });
removed | Event |
The 'removed' event is triggered when a tab is removed. #### Code examples Bind to the removed event by type: jqxTabs.
    $('#jqxTabs').bind('removed', function (event) { // Some code here. });
enable | Event |
The 'enable' event is triggered when the jqxTabs widget is enabled. #### Code examples Bind to the enable event by type: jqxTabs.
    $('#jqxTabs').bind('enable', function (event) { // Some code here. });
disable | Event |
The 'disable' event is triggered when the jqxTabs widget is disabled. #### Code examples Bind to the disable event by type: jqxTabs.
    $('#jqxTabs').bind('disable', function (event) { // Some code here. });
selecting | Event |
The 'selecting' event is triggered when the user selects a tab. This event is cancelable. You can cancel the selection by setting the 'event.cancel = true' in the event callback. #### Code examples Bind to the selecting event by type: jqxTabs.
    $('#jqxTabs').bind('selecting', function (event) { // Some code here. });
unselecting | Event |
The 'unselecting' event is triggered when the user selects a tab. The last selected tab is going to become unselected. This event is cancelable. You can cancel the selection by setting the 'event.cancel = true' in the event callback. #### Code examples Bind to the unselecting event by type: jqxTabs.
    $('#jqxTabs').bind('unselecting', function (event) { // Some code here. });
unselected | Event |
The 'unselected' event is triggered when the user selects a tab. The last selected tab becomes unselected. #### Code examples Bind to the unselected event by type: jqxTabs.
    $('#jqxTabs').bind('unselected', function (event) { // Some code here. });
dragStart | Event |
The 'dragStart' event is triggered when the drag operation started. #### Code examples Bind to the dragStart event by type: jqxTabs.
    $('#jqxTabs').bind('dragStart', function () { // Some code here. });
dragEnd | Event |
The 'dragEnd' event is triggered when the drag operation ended. #### Code examples Bind to the dragEnd event by type: jqxTabs.
    $('#jqxTabs').bind('dragEnd', function (event) { // Some code here. });
locked | Event |
The 'locked' event is triggered when the lock operation ended. #### Code examples Bind to the locked event by type: jqxTabs.
    $('#jqxTabs').bind('locked', function (event) { // Some code here. });
unlocked | Event |
The 'unlocked' event is triggered when the unlocked operation ended. #### Code examples Bind to the unlocked event by type: jqxTabs.
    $('#jqxTabs').bind('unlocked', function (event) { // Some code here. });
collapsed | Event |
The 'collapsed' event is triggered when any tab is collapsed. #### Code examples Bind to the unlocked event by type: jqxTabs.
    $('#jqxTabs').bind('collapsed', function (event) { // Some code here. });
expanded | Event |
The 'expanded' event is triggered when any tab is expanded. #### Code examples Bind to the expanded event by type: jqxTabs.
    $('#jqxTabs').bind('expanded', function (event) { // Some code here. });
## Methods
disable | Method |
Disabling the widget. #### Code examples Invoke the disable method.
    $('#jqxTabs').jqxTabs('disable');
enable | Method |
Enabling the widget. #### Code examples Invoke the enable method.
    $('#jqxTabs').jqxTabs('enable');
removeAt | Method |
Removing tab with indicated index. #### Code examples Invoke the removeAt method.
    $('#jqxTabs').jqxTabs('removeAt', 3);
removeFirst | Method |
Removing the first tab. #### Code examples Invoke the removeFirst method.
    $('#jqxTabs').jqxTabs('removeFirst');
removeLast | Method |
Removing the last tab. #### Code examples Invoke the removeLast method.
    $('#jqxTabs').jqxTabs('removeLast');
collapse | Method |
Collapsing the current selected tab. #### Code examples Invoke the collapse method.
    $('#jqxTabs').jqxTabs('collapse');
expand | Method |
Expanding the current selected tab. #### Code examples Invoke the expand method.
    $('#jqxTabs').jqxTabs('expand');
disableAt | Method |
Disabling tab with indicated index. #### Code examples Invoke the disableAt method.
    $('#jqxTabs').jqxTabs('disableAt', 3);
enableAt | Method |
Enabling tab with indicated index. #### Code examples Invoke the enableAt method.
    $('#jqxTabs').jqxTabs('enableAt', 3);
addAt | Method |
Adding tab at indicated position. #### Code examples Invoke the addAt method.
    $('#jqxTabs').jqxTabs('addAt', 3, tabTitle, tabContent);
addFirst | Method |
Adding tab at the beginning. #### Code examples Invoke the addFirst method.
    $('#jqxTabs').jqxTabs('addFirst', element);
addLast | Method |
Adding tab at the end. #### Code examples Invoke the addLast method.
    $('#jqxTabs').jqxTabs('addLast', element);
select | Method |
Selecting tab with indicated index. #### Code examples Invoke the select method.
    $('#jqxTabs').jqxTabs('select', 3);
length | Method |
Returning the tabs count. #### Code examples Invoke the length method.
    var length = $('#jqxTabs').jqxTabs('length');
lockAt | Method |
Locking tab with specific index. #### Code examples Invoke the lockAt method.
    $('#jqxTabs').jqxTabs('lockAt', 2);
unlockAt | Method |
Unlocing a tab with specific index #### Code examples Invoke the unlockAt method.
    $('#jqxTabs').jqxTabs('unlockAt', 2);
lockAll | Method |
Locing all tabs. #### Code examples Invoke the lockAll method.
    $('#jqxTabs').jqxTabs('lockAll');
unlockAll | Method |
Unlocking all tabs. #### Code examples Invoke the unlockAll method.
    $('#jqxTabs').jqxTabs('unlockAll');
setContentAt | Method |
Sets the content of a Tab. #### Code examples Invoke the setContentAt method.
    $('#jqxTabs').jqxTabs('setContentAt', i, html);
getContentAt | Method |
Gets the content of a Tab. #### Code examples Invoke the getContentAt method.
    $('#jqxTabs').jqxTabs('getContentAt', i, html);
setTitleAt | Method |
Sets the title of a Tab. #### Code examples Invoke the setTitleAt method.
    $('#jqxTabs').jqxTabs('setTitleAt', i, text);
getTitleAt | Method |
Gets the title of a Tab. #### Code examples Invoke the getTitleAt method.
    var text = $('#jqxTabs').jqxTabs('getTitleAt', i);
showCloseButtonAt | Method |
Showing close button at a specific position. #### Code examples Invoke the showCloseButtonAt method.
    $('#jqxTabs').jqxTabs('showCloseButtonAt', 1);
hideCloseButtonAt | Method |
Hiding a close button at a specific position. #### Code examples Invoke the hideCloseButtonAt method.
    $('#jqxTabs').jqxTabs('hideCloseButtonAt', 3);
hideAllCloseButtons | Method |
Hiding all close buttons. #### Code examples Invoke the hideAllCloseButtons method.
    $('#jqxTabs').jqxTabs('hideAllCloseButtons');
showAllCloseButtons | Method |
Showing all close buttons. #### Code examples Invoke the showAllCloseButtons method.
    $('#jqxTabs').jqxTabs('showAllCloseButtons');
ensureVisible | Method |
This method is ensuring the visibility of item with indicated index. If the item is currently not visible the method is scrolling to it. #### Code examples Invoke the ensureVisible method.
    $('#jqxTabs').jqxTabs('ensureVisible', 3);
isDisabled | Method |
Return true if the tab is disabled and false if it is not. #### Code examples Invoke the isDisabled method.
    $('#jqxTabs').jqxTabs('isDisabled', 3);