TabStrip Overview

The Kendo UI TabStrip widget displays a collection of tabs with associated content and contains an unordered list of items which represent its tabs and a collection of div elements which hold the content for each tab.

Initializing the TabStrip

To initialize the TabStrip, use either of the following approaches:

• Using HTML markup
• Using a JSON data object

• When you initialize the TabStrip, create it within a $(document).ready() statement because the widget has to be initialized after the DOM is fully loaded.
• It is not mandatory for the tabs to have content. Therefore, when you create an empty tab, you can skip its associated div element.

Using HTML Markup

The following example demonstrates how to initialize the TabStrip from HTML markup.

<div id="tabstrip">
    <ul>
        <li>First tab</li>
        <li>Second tab</li>
    </ul>
    <div>First tab content</div>
    <div>Second tab content</div>
</div>

<script>
    $(document).ready(function() {
        $("#tabstrip").kendoTabStrip();
    });
</script>

Using JSON data Object

The following example demonstrates how to initialize the TabStrip from a JSON data object.

<div id="tabstrip"></div>

<script>
  $(document).ready(function() {
    $("#tabstrip").kendoTabStrip({
      dataTextField: "text",
      dataContentField: "content",
      dataUrlField: "url",
      dataImageUrlField: "imageUrl",
      dataSpriteCssClass: "spriteCssClass",
      dataContentUrlField: "contentUrl",
      dataSource:
      [{
        text: "Item 1",
        url: "http://www.telerik.com"               // (Optional) Link URL if navigation is needed
      },
       {
         text: "Item 2",
         content: "text"                             // Content for the content element
       },
       {
         text: "Item 3",
         contentUrl: "partialContent.html"           // From where to load the item content
       },
       {
         text: "Item 4",
         imageUrl: "http://www.telerik.com/test.jpg" // (Optional) Item image URL
       },
       {
         text: "Item 5",
         spriteCssClass: "imageClass3"               // (Optional) Item image sprite CSS class
       }]
    });
  });
</script>

Features and Functionality

• Icon TabStrip
• Tabs
• Animation
• Content operations
• Globalization
• Accessibility

Events

For a complete example on the basic TabStrip events, refer to the demo on using the events of the TabStrip.

See Also

• Basic Usage of the TabStrip (Demo)
• Using the Basic Events of the TabStrip (Demo)
• Binding the TabStrip over MVVM (Demo)
• Using the TabStrip with AngularJS Directives (Demo)
• Applying the TabStrip API (Demo)
• JavaScript API Reference of the TabStrip