JavaScript/jQuery Tabs - Customize Item Appearance

For a minor customization of tabs, you can define specific fields in item data objects. For example, the following code generates three tabs: the first has an icon, the second has a badge, the third is disabled.

JavaScript
  • $(function() {
  • $("#tabsContainer").dxTabs({
  • items: [
  • { text: "User", icon: 'user' },
  • { text: "Comment", badge: "New" },
  • { text: "Find", disabled: true }
  • ]
  • });
  • });

If you need a more flexible solution, define an itemTemplate.

JavaScript
  • $(function() {
  • $("#tabsContainer").dxTabs({
  • items: [
  • { text: "User" },
  • { text: "Comment" },
  • { text: "Find" }
  • ],
  • itemTemplate: function (itemData, itemIndex, itemElement) {
  • itemElement.append("<p style='color:#6600cc;'>" + itemData.text + "</p>");
  • }
  • });
  • });

You can also customize individual tabs. Declare them as scripts and reference them in the template property or assign a customization function straight to this property.

HTML
JavaScript
  • <div id="tabsContainer"></div>
  • <script id="individualTabTemplate" type="text/html">
  • <span>Comment</span>
  • </script>
  • $(function() {
  • $("#tabsContainer").dxTabs({
  • items: [{
  • template: function() {
  • return $("<span>").text("User");
  • }
  • }, {
  • template: $("#individualTabTemplate")
  • }]
  • });
  • });
See Also