Sets or gets widget's width.

Code examples

Set the width property.

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

Get the width property.

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

Sets or gets widget's height.

Code examples

Set the height property.

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

Get the height property.

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

Enables or disables the jqxTabs widget.

Code examples

Set the disabled property .

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

Get the disabled property.

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

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.

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

Get the rtl property.

var rtl = $('#jqxTabs').jqxTabs('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.

Sets or gets the duration of the scroll animation.

Code examples

Set the scrollAnimationDuration property.

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

Get the scrollAnimationDuration property.

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

Enables or disables the tabs hover effect.

Code examples

Set the enabledHover property.

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

Get the enabledHover property.

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

Enables or disables the collapsible feature.

Code examples

Set the collapsible property.

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

Get the collapsible property.

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

Sets or gets the animation type of switching tabs.

Possible Values:

'none'

'fade'

Code examples

Set the animationType property.

$('#jqxTabs').jqxTabs({ animationType: 'fade' }); 

Get the animationType property.

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

Sets or gets whether the scroll animation is enabled.

Code examples

Set the enableScrollAnimation property.

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

Get the enableScrollAnimation property.

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

Sets or gets 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

Set the contentTransitionDuration property.

$('#jqxTabs').jqxTabs({ contentTransitionDuration:500 }); 

Get the contentTransitionDuration property.

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

Sets or gets user interaction used for switching the different tabs.

Possible Values:

'click'

'dblclick'

'mouseenter'

'none'

Code examples

Set the toggleMode property.

$('#jqxTabs').jqxTabs({ toggleMode:'mouseenter' }); 

Get the toggleMode property.

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

Sets or gets selected tab.

Code examples

Set the selectedItem property.

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

Get the selectedItem property.

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

Sets or gets whether the tabs are positioned at 'top' or 'bottom.

Possible Values:

'top'

'bottom'

Code examples

Set the position property.

$('#jqxTabs').jqxTabs({ position:"bottom" }); 

Get the position property.

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

Sets or gets whether the selection tracker is enabled.

Code examples

Set the selectionTracker property.

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

Get the selectionTracker property.

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

Sets or gets whether the scrolling is enabled.

Code examples

Set the scrollable property.

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

Get the scrollable property.

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

Sets or gets the position of the scroll arrows.

Possible Values:

'left'

'right'

'both'

Code examples

Set the scrollPosition property.

$('#jqxTabs').jqxTabs({ scrollPosition:'right'}); 

Get the scrollPosition property.

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

Sets or gets the scrolling step.

Code examples

Set the scrollStep property.

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

Get the scrollStep property.

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

Sets or gets whether the jqxTabs header's height will be equal to the item with max height.

Code examples

Set the autoHeight property.

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

Get the autoHeight property.

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

Sets or gets whether a close button is displayed in each tab.

Code examples

Set the showCloseButtons property.

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

Get the showCloseButtons property.

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

Sets or gets the close button size.

Code examples

Set the closeButtonSize property.

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

Get the closeButtonSize property.

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

Callback function that the tab calls when a content panel needs to be initialized.

Code examples

Set the initTabContent property.

        $(document).ready(function () {
            var loadPage = function (url, tabIndex) {
                $.get(url, function (data) {
                    // dynamically appends data returned from a server to a content element with ID equal to "content1" 
                    // for the first tab, "content2" for the second tab or "content3" for the third tab. 
                    $('#content' + tabIndex).html(data);
                });
            }

            // Create jqxTabs.
            $('#jqxTabs').jqxTabs({
                width: 580, height: 200,
                initTabContent:
                   function (tab) {
                       // The 'tab' parameter represents the selected tab's index.
                       var pageIndex = tab + 1;
                       loadPage('pages/ajax' + pageIndex + '.htm', pageIndex);
                   }
            });
        });
                        

Enables or disables the keyboard navigation.

Code examples

Set the keyboardNavigation property.

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

Get the keyboardNavigation property.

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

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

Set the reorder property.

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

Get the reorder property.

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

Sets or gets whether the drop animation is enabled.

Code examples

Set the enableDropAnimation property.

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

Get the enableDropAnimation property.

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

This event is triggered when the jqxTabs is created. You should subscribe to this event before the jqxTabs initialization.

Code examples

Bind to the created event by type: jqxTabs.

$('#jqxTabs').on('created', function () { // Some code here. }); 

This event is triggered when the user selects a new tab.

Code examples

Bind to the selected event by type: jqxTabs.

$('#jqxTabs').on('selected', function (event) 
{ 
    var selectedTab = event.args.item;
}); 

This 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').on('tabclick', function (event) 
{ 
    var clickedItem = event.args.item; 
}); 

This event is triggered when a new tab is added to the jqxTabs.

Code examples

Bind to the add event by type: jqxTabs.

$('#jqxTabs').on('add', function (event) { // Some code here. }); 

This event is triggered when a tab is removed.

Code examples

Bind to the removed event by type: jqxTabs.

$('#jqxTabs').on('removed', function (event) { // Some code here. }); 

This 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').on('selecting', function (event) { // Some code here. }); 

This 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').on('unselecting', function (event) { // Some code here. }); 

This 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').on('unselected', function (event) { // Some code here. }); 

This event is triggered when the drag operation started.

Code examples

Bind to the dragStart event by type: jqxTabs

$('#jqxTabs').on('dragStart', function () { // Some code here. }); 

This event is triggered when the drag operation ended.

Code examples

Bind to the dragEnd event by type: jqxTabs

$('#jqxTabs').on('dragEnd', function (event) { // Some code here. }); 

Theis event is triggered when any tab is collapsed.

Code examples

Bind to the collapsed event by type: jqxTabs

$('#jqxTabs').on('collapsed', function (event) { // Some code here. }); 

This event is triggered when any tab is expanded.

Code examples

Bind to the expanded event by type: jqxTabs

$('#jqxTabs').on('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'); 

Sets the content of a Tab.

Code examples

Invoke the setContentAt method.

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

Gets the content of a Tab. The returned value is a HTML Element.

Code examples

Invoke the getContentAt method.

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

Sets the title of a Tab.

Code examples

Invoke the setTitleAt method.

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

Gets the title of a Tab. The returned value is a "string".

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

Focuses the widget.

Code examples

Invoke the focus method.

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

Destroys the widget.

Code examples

Invoke the destroy method.

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

Sets or gets the selected tab.

Code example

Invoke the val method.

// Get the selected tab's index.

var value = $("#jqxTabs").jqxTabs('val');

// Get the selected tab's index using jQuery's val()

var value = $("#jqxTabs").val();

// Set the selected tab.

$("#jqxTabs").jqxTabs('val', 2);

// Set the selected tab using jQuery's val().

$("#jqxTabs").val(2);