Sets or gets whether the "Add new tab" button (+) is displayed.

Code examples

Set the addNewTab property.

 let tabs = document.querySelector('jqx-tabs');

 tabs.addNewTab = false;

Get the addNewTab property.

 let tabs = document.querySelector('jqx-tabs');

 let addNewTab = tabs.addNewTab;

Sets or gets the close button mode. Possible values: 'default', 'selected'.

Code examples

Set the closeButtonMode property.

 let tabs = document.querySelector('jqx-tabs');

 tabs.closeButtonMode = 'default';

Get the closeButtonMode property.

 let tabs = document.querySelector('jqx-tabs');

 let closeButtonMode = tabs.closeButtonMode;

Sets or gets whether close buttons are displayed.

Code examples

Set the closeButtons property.

 let tabs = document.querySelector('jqx-tabs');

 tabs.closeButtons = false;

Get the closeButtons property.

 let tabs = document.querySelector('jqx-tabs');

 let closeButtons = tabs.closeButtons;

Sets or gets whether the Tabs content section is collapsed.

Code examples

Set the collapsed property.

 let tabs = document.querySelector('jqx-tabs');

 tabs.collapsed = false;

Get the collapsed property.

 let tabs = document.querySelector('jqx-tabs');

 let collapsed = tabs.collapsed;

Enables or disables the collapsible feature.

Code examples

Set the collapsible property.

 let tabs = document.querySelector('jqx-tabs');

 tabs.collapsible = false;

Get the collapsible property.

 let tabs = document.querySelector('jqx-tabs');

 let collapsible = tabs.collapsible;

Enables or disables the element.

Code examples

Set the disabled property.

 let tabs = document.querySelector('jqx-tabs');

 tabs.disabled = false;

Get the disabled property.

 let tabs = document.querySelector('jqx-tabs');

 let disabled = tabs.disabled;

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.

Code examples

Set the messages property.

 let tabs = document.querySelector('jqx-tabs');

 tabs.messages = { 'en': { 'ambiguousIndexes': 'jqx-tabs: Initially set jqx-tab-item indexes are ambiguous and are ignored in favour of the HTML structure.', 'detailsObjectRequired': 'jqx-tabs: The method "insert" requires a details Object to be passed as a second argument.', 'invalidIndex': 'jqx-tabs: "{{method}}" method accepts an index of type number.', 'referenceNodeNotChild': 'jqx-tabs: Passed {{argument}} is not part of this jqx-tabs element.', 'tabItemRequired': 'jqx-tabs: The method "{{method}}" requires a "jqx-tab-item" element to be passed as an argument.' } };

Get the messages property.

 let tabs = document.querySelector('jqx-tabs');

 let messages = tabs.messages;

Sets or gets where the tab strip is positioned. Possible values: 'top', 'bottom', 'left', 'right', 'hidden'.

Code examples

Set the position property.

 let tabs = document.querySelector('jqx-tabs');

 tabs.position = 'left';

Get the position property.

 let tabs = document.querySelector('jqx-tabs');

 let position = tabs.position;

Disables user interaction with the element.

Code examples

Set the readonly property.

 let tabs = document.querySelector('jqx-tabs');

 tabs.readonly = true;

Get the readonly property.

 let tabs = document.querySelector('jqx-tabs');

 let readonly = tabs.readonly;

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.

 let tabs = document.querySelector('jqx-tabs');

 tabs.reorder = true;

Get the reorder property.

 let tabs = document.querySelector('jqx-tabs');

 let reorder = tabs.reorder;

Sets or gets whether tab labels can be resized by dragging with the mouse.

Code examples

Set the resize property.

 let tabs = document.querySelector('jqx-tabs');

 tabs.resize = true;

Get the resize property.

 let tabs = document.querySelector('jqx-tabs');

 let resize = tabs.resize;

Sets or gets the position of the scroll buttons. Possible values: 'near', 'far', 'both'.

Code examples

Set the scrollButtonsPosition property.

 let tabs = document.querySelector('jqx-tabs');

 tabs.scrollButtonsPosition = 'far';

Get the scrollButtonsPosition property.

 let tabs = document.querySelector('jqx-tabs');

 let scrollButtonsPosition = tabs.scrollButtonsPosition;

Sets or gets which tab is selected.

Code examples

Set the selectedIndex property.

 let tabs = document.querySelector('jqx-tabs');

 tabs.selectedIndex = 0;

Get the selectedIndex property.

 let tabs = document.querySelector('jqx-tabs');

 let selectedIndex = tabs.selectedIndex;

Determines the way the user can switch between tabs. Possible values: 'click', 'dblclick', 'mouseenter', 'none'.

Code examples

Set the selectionMode property.

 let tabs = document.querySelector('jqx-tabs');

 tabs.selectionMode = 'mouseenter';

Get the selectionMode property.

 let tabs = document.querySelector('jqx-tabs');

 let selectionMode = tabs.selectionMode;

Applies one of four behaviors when the element is not wide enough to display all tab labels. Possible values: 'scroll', 'dropdown', 'wrap', 'shrink'.

Code examples

Set the tabOverflow property.

 let tabs = document.querySelector('jqx-tabs');

 tabs.tabOverflow = 'wrap';

Get the tabOverflow property.

 let tabs = document.querySelector('jqx-tabs');

 let tabOverflow = tabs.tabOverflow;

Sets or gets the orientation of the text in the tabs. Possible values: 'horizontal', 'vertical'.

Code examples

Set the textOrientation property.

 let tabs = document.querySelector('jqx-tabs');

 tabs.textOrientation = 'horizontal';

Get the textOrientation property.

 let tabs = document.querySelector('jqx-tabs');

 let textOrientation = tabs.textOrientation;

This event is triggered when the tab selection is changed.

Code examples

Bind to the change event by type: jqxTabs

 let tabs = document.querySelector('jqx-tabs'); 

 tabs.addEventListener('change', function (event) {
     // event handling code goes here.
 }
 

This event is triggered when a tab is closed.

Code examples

Bind to the close event by type: jqxTabs

 let tabs = document.querySelector('jqx-tabs'); 

 tabs.addEventListener('close', function (event) {
     // event handling code goes here.
 }
 

This event is triggered when a tab is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function.

Code examples

Bind to the closing event by type: jqxTabs

 let tabs = document.querySelector('jqx-tabs'); 

 tabs.addEventListener('closing', function (event) {
     // event handling code goes here.
 }
 

This event is triggered when tabs have been reordered.

Code examples

Bind to the reorder event by type: jqxTabs

 let tabs = document.querySelector('jqx-tabs'); 

 tabs.addEventListener('reorder', function (event) {
     // event handling code goes here.
 }
 

This event is triggered when a reorder operation has ended.

Code examples

Bind to the reorderEnd event by type: jqxTabs

 let tabs = document.querySelector('jqx-tabs'); 

 tabs.addEventListener('reorderEnd', function (event) {
     // event handling code goes here.
 }
 

This event is triggered when a reorder operation has started.

Code examples

Bind to the reorderStart event by type: jqxTabs

 let tabs = document.querySelector('jqx-tabs'); 

 tabs.addEventListener('reorderStart', function (event) {
     // event handling code goes here.
 }
 

Appends a "jqx-tab-item" node as the last tab of the Tabs.

Code examples

Invoke the appendChild method.

 let tabs = document.querySelector('jqx-tabs'); 

 tabs.appendChild(); 

Collapses the content section.

Code examples

Invoke the collapse method.

 let tabs = document.querySelector('jqx-tabs'); 

 tabs.collapse(); 

Makes sure a tab is visible by scrolling to it.

Code examples

Invoke the ensureVisible method.

 let tabs = document.querySelector('jqx-tabs'); 

 tabs.ensureVisible(); 

Expands the content section.

Code examples

Invoke the expand method.

 let tabs = document.querySelector('jqx-tabs'); 

 tabs.expand(); 

Inserts a new tab and an associated content section.

Code examples

Invoke the insert method.

// Get the value.

 let tabs = document.querySelector('jqx-tabs'); 

 let insert = tabs.insert(); 

// Set the value.

 let tabs = document.querySelector('jqx-tabs'); 

 tabs.insert([object Object]); 

Inserts the specified "jqx-tab-item" node before the reference "jqx-tab-item" node.

Code examples

Invoke the insertBefore method.

 let tabs = document.querySelector('jqx-tabs'); 

 tabs.insertBefore(); 

Removes a tab and its associated content section.

Code examples

Invoke the remove method.

Removes a child "jqx-tab-item" node.

Code examples

Invoke the removeChild method.

 let tabs = document.querySelector('jqx-tabs'); 

 tabs.removeChild(); 

Selects a tab.

Code examples

Invoke the select method.

Sets whether the element can be focused.

Code examples

Invoke the setFocusable method.

 let tabs = document.querySelector('jqx-tabs'); 

 tabs.setFocusable(); 

Updates a tab and its associated content section.

Code examples

Invoke the update method.

// Set the value.

 let tabs = document.querySelector('jqx-tabs'); 

 tabs.update('Updated TAB');