JavaScript/jQuery TabPanel - Customize Item Appearance
An item in the TabPanel UI component includes a tab and a view. For a minor customization of TabPanel items, you can define specific fields in item data objects. For example, the following code generates three items: the first has a badge, the second is disabled, the third has an icon.
- $(function() {
- $('#tabPanelContainer').dxTabPanel({
- items: [{
- title: 'Info',
- text: 'This is Info Tab',
- badge: 'New'
- }, {
- title: 'Contacts',
- text: 'This is Contacts Tab',
- disabled: true
- }, {
- title: 'Address',
- text: 'This is Address Tab',
- icon: 'home'
- }]
- });
- });
- <div id="tabPanelContainer"></div>
If you need a more flexible solution, define itemTemplate and itemTitleTemplate for views and tabs, respectively.
- var dataItems = [{
- title: "Info",
- data: { firstName: "John", lastName: "Smith", birthYear: 1986 }
- }, {
- title: "Contacts",
- data: { phone: "(555)555-5555", email: "John.Smith@example.com" }
- }];
- $(function() {
- $("#tabPanelContainer").dxTabPanel({
- items: dataItems,
- itemTitleTemplate: function(itemData, itemIndex, itemElement) {
- itemElement.append("<p>" + itemData.title + "</p>");
- },
- itemTemplate: function(itemData, itemIndex, itemElement) {
- var container = $("<div style='margin:25px;'>");
- container.append("<h1>" + itemData.title + "</h1>");
- var info = $("<div style='text-align:left;'>");
- for (var field in itemData.data) {
- info.append("<p>" + field + ": <b>" + itemData.data[field] + "</b></p>");
- }
- container.append(info);
- itemElement.append(container);
- }
- });
- });
- <div id="tabPanelContainer"></div>
You can also customize individual items. Declare them as scripts and reference them in the template property or assign a customization function straight to this property.
- $(function() {
- $("#tabPanelContainer").dxTabPanel({
- items: [{
- title: "Info",
- template: function() {
- return $("<p>").text("This is Info Tab");
- }
- }, {
- title: "Contacts",
- template: $("#individualTemplate")
- }]
- });
- });
- <div id="tabPanelContainer"></div>
- <script id="individualTemplate" type="text/html">
- <p>This is Contacts Tab</p>
- </script>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.