Gets or sets widget's width.

Code examples

Initialize a jqxTabs with the width property specified.

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

Gets or sets widget's height.

Code examples

Initialize a jqxTabs with the height property specified.

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

Enables or disables the jqxTabs widget.

Code examples

Initialize a jqxTabs with the disabled property specified.

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

Gets or sets the duration of the scroll animation.

Code examples

Initialize a jqxTabs with the scrollAnimationDuration property specified.

$('#jqxTabs').jqxTabs({ scrollAnimationDuration: 200 }); 

Enables or disables the tabs hover effect.

Code examples

Initialize a jqxTabs with the enabledHover property specified.

$('#jqxTabs').jqxTabs({ enabledHover: false }); 

Enables or disables the collapsible feature.

Code examples

Initialize a jqxTabs with the collapsible property specified.

$('#jqxTabs').jqxTabs({ collapsible: false }); 

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

Gets or sets whether the scroll animation is enabled.

Code examples

Initialize a jqxTabs with the enableScrollAnimation property specified.

$('#jqxTabs').jqxTabs({ enableScrollAnimation:false }); 

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

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

Gets or sets selected tab.

Code examples

Initialize a jqxTabs with the selectedItem property specified.

$('#jqxTabs').jqxTabs({ selectedItem: 2 }); 

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

Gets or sets whether the selection tracker is enabled.

Code examples

Initialize a jqxTabs with the selectionTracker property specified.

$('#jqxTabs').jqxTabs({ selectionTracker:false}); 

Gets or sets whether the scrolling is enabled.

Code examples

Initialize a jqxTabs with the scrollable property specified.

$('#jqxTabs').jqxTabs({ scrollable:false}); 

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

Gets or sets the scrolling step.

Code examples

Initialize a jqxTabs with the scrollStep property specified.

$('#jqxTabs').jqxTabs({ scrollStep:80}); 

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

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

Gets or sets the close button size.

Code examples

Initialize a jqxTabs with the closeButtonSize property specified.

$('#jqxTabs').jqxTabs({ closeButtonSize:20}); 

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.

                            }

                        }); 

Enables or disables the keyboard navigation.

Code examples

Initialize a jqxTabs with the keyboardNavigation property specified.

$('#jqxTabs').jqxTabs({ keyboardNavigation: 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}); 

Gets or sets whether the drop animation is enabled.

Code examples

Initialize a jqxTabs with the enableDropAnimation property specified.

$('#jqxTabs').jqxTabs({enableDropAnimation: true}); 

Gets or sets the drop animation duration.

Code examples

Initialize a jqxTabs with the dropAnimationDuration property specified.

$('#jqxTabs').jqxTabs({dropAnimationDuration: 350}); 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Disabling the widget.

Code examples

Invoke the disable method.

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

Enabling the widget.

Code examples

Invoke the enable method.

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

Removing tab with indicated index.

Code examples

Invoke the removeAt method.

$('#jqxTabs').jqxTabs('removeAt', 3); 

Removing the first tab.

Code examples

Invoke the removeFirst method.

$('#jqxTabs').jqxTabs('removeFirst'); 

Removing the last tab.

Code examples

Invoke the removeLast method.

$('#jqxTabs').jqxTabs('removeLast'); 

Collapsing the current selected tab.

Code examples

Invoke the collapse method.

$('#jqxTabs').jqxTabs('collapse'); 

Expanding the current selected tab.

Code examples

Invoke the expand method.

$('#jqxTabs').jqxTabs('expand'); 

Disabling tab with indicated index.

Code examples

Invoke the disableAt method.

$('#jqxTabs').jqxTabs('disableAt', 3); 

Enabling tab with indicated index.

Code examples

Invoke the enableAt method.

$('#jqxTabs').jqxTabs('enableAt', 3); 

Adding tab at indicated position.

Code examples

Invoke the addAt method.

$('#jqxTabs').jqxTabs('addAt', 3, tabTitle, tabContent); 

Adding tab at the beginning.

Code examples

Invoke the addFirst method.

$('#jqxTabs').jqxTabs('addFirst', element); 

Adding tab at the end.

Code examples

Invoke the addLast method.

$('#jqxTabs').jqxTabs('addLast', element); 

Selecting tab with indicated index.

Code examples

Invoke the select method.

$('#jqxTabs').jqxTabs('select', 3); 

Returning the tabs count.

Code examples

Invoke the length method.

var length = $('#jqxTabs').jqxTabs('length'); 

Locking tab with specific index.

Code examples

Invoke the lockAt method.

$('#jqxTabs').jqxTabs('lockAt', 2); 

Unlocing a tab with specific index

Code examples

Invoke the unlockAt method.

$('#jqxTabs').jqxTabs('unlockAt', 2); 

Locing all tabs.

Code examples

Invoke the lockAll method.

$('#jqxTabs').jqxTabs('lockAll'); 

Unlocking all tabs.

Code examples

Invoke the unlockAll method.

$('#jqxTabs').jqxTabs('unlockAll'); 

Sets the content of a Tab.

Code examples

Invoke the setContentAt method.

$('#jqxTabs').jqxTabs('setContentAt', i, html); 

Gets the content of a Tab.

Code examples

Invoke the getContentAt method.

$('#jqxTabs').jqxTabs('getContentAt', i, html); 

Sets the title of a Tab.

Code examples

Invoke the setTitleAt method.

$('#jqxTabs').jqxTabs('setTitleAt', i, text); 

Gets the title of a Tab.

Code examples

Invoke the getTitleAt method.

var text = $('#jqxTabs').jqxTabs('getTitleAt', i); 

Showing close button at a specific position.

Code examples

Invoke the showCloseButtonAt method.

$('#jqxTabs').jqxTabs('showCloseButtonAt', 1); 

Hiding a close button at a specific position.

Code examples

Invoke the hideCloseButtonAt method.

$('#jqxTabs').jqxTabs('hideCloseButtonAt', 3); 

Hiding all close buttons.

Code examples

Invoke the hideAllCloseButtons method.

$('#jqxTabs').jqxTabs('hideAllCloseButtons'); 

Showing all close buttons.

Code examples

Invoke the showAllCloseButtons method.

$('#jqxTabs').jqxTabs('showAllCloseButtons'); 

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

Return true if the tab is disabled and false if it is not.

Code examples

Invoke the isDisabled method.

$('#jqxTabs').jqxTabs('isDisabled', 3);