Your search did not match any results.
Tab Panel

Overview

API Reference
The dxTabPanel widget consists of the dxTabs and dxMultiView widgets. It automatically synchronizes the selected tab and the currently displayed view. If an end-user switches a tab, the widget displays the appropriate view and when an end-user switches a view by swiping, the widget selects the appropriate tab. Each view and each tab displayed by the widget corresponds to a data source item. Certain fields from the data source item are used by the title template to display the tab, other fields by the item template to display the view.
Copy to Codepen
Apply
Reset
$(function(){ DevExpress.ui.setTemplateEngine("underscore"); var tabPanel = $("#tabpanel-container").dxTabPanel({ height: 260, dataSource: tabPanelItems, selectedIndex: 0, loop: false, animationEnabled: true, swipeEnabled: true, itemTitleTemplate: $("#title"), itemTemplate: $("#customer"), onSelectionChanged: function(e) { $(".selected-index") .text(e.component.option("selectedIndex") + 1); } }).dxTabPanel("instance"); $("#loop-enabled").dxCheckBox({ value: false, text: "Loop enabled", onValueChanged: function(e) { tabPanel.option("loop", e.value); } }); $("#animation-enabled").dxCheckBox({ value: true, text: "Animation enabled", onValueChanged: function(e) { tabPanel.option("animationEnabled", e.value); } }); $("#swipe-enabled").dxCheckBox({ value: true, text: "Swipe enabled", onValueChanged: function(e) { tabPanel.option("swipeEnabled", e.value); } }); $(".item-count").text(tabPanelItems.length); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></script> <script src="js/underscore-1.5.1.min.js"></script> <script src="data.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="tabpanel"> <div id="tabpanel-container"> </div> <div class="item-box"> Item <span class="selected-index">1</span> of <span class="item-count"></span> </div> <div class="options"> <div class="options-header">Options:</div> <div id="loop-enabled"></div> <br /> <div id="animation-enabled"></div> <br /> <div id="swipe-enabled"></div> </div> </div> <script type="text/html" id="title"> <span><%= CompanyName%></span> </script> <script type="text/html" id="customer"> <div class="tabpanel-item"> <div> <p> <b><%= City%></b> (<span><%= State%></span>) </p> <p> <span><%= Zipcode%></span> <span><%= Address%></span> </p> </div> <div> <p> Phone: <b><%= Phone%></b> </p> <p> Fax: <b><%= Fax%></b> </p> <p> Website: <a href="<%= Website%>" target="_blank"> <%= Website%> </a> </p> </div> </div> </script> </div> </body> </html>
.tabpanel-item { height: 200px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-left: 25px; padding-top: 55px; } .mobile .tabpanel-item { padding-top: 10px; } .tabpanel-item > div { float: left; padding: 0 85px 10px 10px } .tabpanel-item p { font-size: 16px; } .item-box { font-size: 16px; margin: 15px 0 45px 10px; } .options { padding-left: 10px; } .options .options-header { font-size: 1.2em; padding-bottom: 5px; } .options .dx-checkbox { margin-bottom: 5px; }
var tabPanelItems = [{ "ID": 1, "CompanyName": "SuprMart", "Address": "702 SW 8th Street", "City": "Bentonville", "State": "Arkansas", "Zipcode": 72716, "Phone": "(800) 555-2797", "Fax": "(800) 555-2171", "Website": "http://www.nowebsitesupermart.com" }, { "ID": 2, "CompanyName": "El'Depot", "Address": "2455 Paces Ferry Road NW", "City": "Atlanta", "State": "Georgia", "Zipcode": 30339, "Phone": "(800) 595-3232", "Fax": "(800) 595-3231", "Website": "http://www.nowebsitedepot.com" }, { "ID": 3, "CompanyName": "K&S Music", "Address": "1000 Nicllet Mall", "City": "Minneapolis", "State": "Minnesota", "Zipcode": 55403, "Phone": "(612) 304-6073", "Fax": "(612) 304-6074", "Website": "http://www.nowebsitemusic.com" }, { "ID": 4, "CompanyName": "Tom Club", "Address": "999 Lake Drive", "City": "Issaquah", "State": "Washington", "Zipcode": 98027, "Phone": "(800) 955-2292", "Fax": "(800) 955-2293", "Website": "http://www.nowebsitetomsclub.com" }];