JavaScript/jQuery TabPanel - Getting Started
The TabPanel UI component consists of the Tabs and MultiView components. The TabPanel automatically synchronizes the selected tab with the currently displayed view and vice versa.
This tutorial explains how to add a TabPanel to a page and configure its core features. The following control demonstrates the result:
Refer to the sections below for more information about each configuration step. The full code is available in the following GitHub repository: getting-started-with-tabpanel.
Create the TabPanel
Add DevExtreme to your jQuery application and use the following code to create a TabPanel:
- $(function() {
- $("#tabPanel").dxTabPanel({
- // Configuration goes here
- });
- });
- <html>
- <head>
- <!-- ... -->
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
- <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.12/css/dx.common.css">
- <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.12/css/dx.light.css">
- <link rel="stylesheet" href="index.css">
- <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/20.2.12/js/dx.all.js"></script>
- <script type="text/javascript" src="index.js"></script>
- </head>
- <body class="dx-viewport">
- <div id="tabPanel"></div>
- </body>
- </html>
- #tabPanel {
- height: 250px;
- width: 500px;
- }
Create Tabs
Populate the items[] array with data items. The TabPanel generates a tab with a view for each item in this array.
Specify a tab's title and/or icon properties to configure an individual tab. The code below uses icons from the DevExtreme icon library. You can also use the badge property to create a badge with custom text.
- $(function(){
- $("#tabPanel").dxTabPanel({
- items: [{
- title: "Employee",
- icon: "floppy",
- // ...
- }, {
- title: "Notes",
- icon: "comment",
- // ...
- }, {
- title: "Role",
- icon: "isnotblank",
- badge: "new",
- // ...
- }]
- });
- });
The code above produces the following output:
You can also use the itemTitleTemplate property to specify a custom template for all tabs. items.tabTemplate overrides the itemTitleTemplate property and allows you to specify a template for an individual tab. This approach is not shown in this tutorial, but you can refer to the property descriptions for details.
Specify View Content
You can use the following properties to specify view content:
itemTemplate
Specifies a custom template for all views.items[].template
Specifies a custom template for an individual view. This property overrides itemTemplate.items[].text
Specifies text displayed in an individual view.noDataText
Specifies text or markup to display when views do not have content.
This tutorial demonstrates the use of the items[].template property. This property allows you to specify different content for individual views. In the code below, the views contain the Form, TextArea, and RadioGroup UI components.
- $(function(){
- $("#tabPanel").dxTabPanel({
- items: [{
- title: "Employee",
- icon: "floppy",
- template: function (itemData, itemIndex, element) {
- const formDiv = $("<div style='padding:15px'>")
- formDiv.dxForm({
- formData: employeeData,
- items: ["name", "position", "hireDate", "officeNumber"]
- });
- formDiv.appendTo(element);
- }
- }, {
- title: "Notes",
- icon: "comment",
- template: function (itemData, itemIndex, element) {
- const textAreaDiv = $("<div style='padding:15px; height: 100%'>")
- textAreaDiv.dxTextArea({
- value: employeeData.notes
- });
- textAreaDiv.appendTo(element);
- }
- }, {
- title: "Role",
- icon: "isnotblank",
- badge: "new",
- template: function (itemData, itemIndex, element) {
- const radioGroupDiv = $("<div style='padding:15px'>")
- radioGroupDiv.dxRadioGroup({
- items: employeeData.roles,
- value: employeeData.roles[0]
- });
- radioGroupDiv.appendTo(element);
- }
- }]
- });
- const employeeData = {
- name: "John Heart",
- position: "CEO",
- hireDate: new Date(2012, 4, 13),
- officeNumber: 901,
- notes: "John has been in the Audio/Video industry since 1990. He has led DevAV as its CEO since 2003.",
- roles: ["Chief Officer", "Manager", "Administrator"]
- };
- });
Navigate Between Tabs
Specify the following properties to configure navigation between tabs:
swipeEnabled
Specifies whether users can switch between views with the swipe gesture.loop
Specifies whether to loop views.animationEnabled
Specifies whether to animate the change of the current view.selectedIndex
Specifies the index of the currently selected tab. Use this property to switch between tabs programmatically. In this tutorial, this property's value depends on the the RadioGroup's selected item (seetabSwitcherRadioGroup
).
- $(function(){
- let tabPanel = $("#tabPanel").dxTabPanel({
- loop: true,
- animationEnabled: true,
- swipeEnabled: true,
- selectedIndex: 0,
- onSelectionChanged: function(e) {
- const selectedTab = e.addedItems[0].title;
- tabSwitcherRadioGroup.option("value", selectedTab);
- },
- // ...
- }).dxTabPanel("instance");
- let tabSwitcherRadioGroup = $("#radioGroup").dxRadioGroup({
- items: tabNames,
- value: tabNames[0],
- layout: "horizontal",
- onValueChanged: function(e) {
- const selectedTabIndex = tabNames.indexOf(e.value);
- tabPanel.option("selectedIndex", selectedTabIndex);
- }
- }).dxRadioGroup("instance");
- });
- const tabNames = ["Employee", "Notes", "Role"];
For further information on the TabPanel UI component, refer to the following resources:
If you have technical questions, please create a support ticket in the DevExpress Support Center.