UI Widgets Tabs

A tab strip used to switch between pages.

Type: Object

The dxTabs widget displays items that perform an action when clicked. The tabs are loaded from an array specified from the dataSource configuration option. You can specify an array of objects as the widget data source.

JavaScript
var tabs = [
    { text: "user", icon: "user" },
    { text: "comment", icon: "comment" },
    { text: "find", icon: "find"}
];

Declare a function that processes a tab item click and assign it to the itemClickAction configuration option.

JavaScript
var tabClicked = function(e){
    alert(e.itemData.text + " tab clicked");
};

Note that you can access the clicked item fields from the itemData field of the object passed as an argument to the itemClickAction function.

To create the dxTabs widget, add a div element with dxTabs Knockout binding within the body of the required view.

HTML
<div data-bind="dxTabs:{dataSource: tabs, itemClickAction: tabClicked}"></div>

Refer to the Add a widget documentation section to learn how to create widgets in detail.

Show Example:
jQuery
<div id="tabs" data-bind="dxTabs: { items: tabs, selectedIndex: selectedTab }"></div>
<div id="tabContent" data-bind="text: tabContent"></div>
tabs = [
  { text: "user", icon: "user", content: "User tab content" },
  { text: "comment", icon: "comment", content: "Comment tab content" },
  { text: "find", icon: "find", content: "Find tab content" },
];

tabContent = ko.observable();
  
selectedTab = ko.observable(0);
 
ko.computed(function() {    
    tabContent(tabs[selectedTab()].content);
});
body {
  text-align: center;
}
#tabContent {
  height: 400px;
  margin: 20px;
  border: 1px solid;
}

Configuration

An object defining configuration options for the dxTabs widget.

Methods

This section describes members used to manipulate the object.