Animation Effects

Configure Animation Settings

toggle animation
expand animation
animate opacity

First Tab
Second Tab
Third Tab
Fourth Tab
Fifth Tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis libero, lobortis ac rutrum quis, varius a velit. Donec lacus erat, cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget risus. Integer facilisis, justo cursus venenatis vehicula, massa nisl tempor sem, in ullamcorper neque mauris in orci.

Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris pulvinar molestie accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula, pharetra quis aliquam sed, scelerisque sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.

Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque enim, eget sodales lorem condimentum rutrum. Phasellus sem metus, ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique arcu ut sapien elementum pellentesque.

Maecenas vitae eros vel enim molestie cursus. Proin ut lacinia ipsum. Nam at elit arcu, at porttitor ipsum. Praesent id viverra lorem. Nam lacinia elementum fermentum. Nulla facilisi. Nulla bibendum erat sed sem interdum suscipit. Vestibulum eget molestie leo. Aliquam erat volutpat. Ut sed nulla libero. Suspendisse id euismod quam. Aliquam interdum turpis vitae purus consectetur in pulvinar libero accumsan. In id augue dui, ac volutpat ante. Suspendisse purus est, ullamcorper id bibendum sed, placerat id leo.

Fusce nec mauris enim, non pharetra neque. Etiam elementum nunc ut velit fermentum sed porta eros dignissim. Duis at nisl eros. Integer arcu nisl, accumsan non molestie at, elementum nec odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque arcu odio, aliquam vel viverra ac, varius at sapien. Nullam elementum nulla non libero interdum vestibulum at in lacus. Curabitur ac magna ac lacus dapibus convallis non at turpis.

Description
View Code
Configuration (1)
Methods (8)
Events (3)

The TabStrip widget displays a collection of tabs with associated tab content. TabStrips are composed of an HTML unordered list of items, which represent the tabs, and a collection of HTML divs, which define the tab content.

Getting Started

In a HTML div, create an HTML unordered list for tabs, HTML divs for content

 <div id="tabstrip">
     <ul>
         <li>First Tab</li>
         <li>Second Tab</li>
     </ul>
     <div>First Tab Content</div>
     <div>Second Tab Content</div>
 </div>

Initialize the TabStrip using a jQuery selector to target the outer div

var tabStrip = $("#tabStrip").kendoTabStrip();

Tabs do not have to have content. If a tab should have no content, it is safe to omit the HTML div.

Loading TabStrip content with Ajax

While any valid technique for loading Ajax content can be used, TabStrip provides built-in support for asynchronously loading content from URLs. These URLs should return HTML fragments that can be loaded in a TabStrip content area.

Loading Tab content asynchronously

 <!-- Define the TabStrip HTML -->
 <div id="tabstrip">
     <ul>
         <li>First Tab</li>
         <li>Second Tab</li>
     </ul>
     <div> </div>
     <div> </div>
 </div>

 //Initialize TabStrip and configure one tab with async content loading
 $(document).ready(function(){
     $("#tabstrip").kendoTabStrip({
       contentUrls: [null, "html-content-snippet.html"]
     });
 });

Dynamically configure TabStrip tabs

The TabStrip API provides several methods for dynamically adding or removing Tabs. To add tabs, provide the new item as a JSON object along with a reference item that will be used to determine the placement in the TabStrip.

A reference item is simply a target Tab HTML element that already exists in the TabStrip. Any valid jQuery selector can be used to obtain a reference to the target item. For examples, see the TabStrip API demos.

Removing an item only requires a reference to the target element that should be removed.

Dynamically add a new Tab

 var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
 tabstrip.insertAfter(
     { text: "New Tab" },
     tabstrip.tabGroup.children("li:last")
 );

Selecting a Tab on Initial Load

A common desire with TabStrips is to select a tab and display its associated content on initial load. There are two ways to accomplish this with TabStrip:

Manually add the "t-state-active" class to the Tab that should be selected
Use the TabStrip API to target and select a Tab

Both approaches produce the same end result. The first approach requires no additional JavaScript, but does require a small amount of HTML configuration.

Selecting a default tab manually using HTML

 <div id="tabstrip">
     <ul>
         <li class="t-state-active">First Tab</li>
         <li>Second Tab</li>
     </ul>
     <div> </div>
     <div> </div>
 </div>

 //Initialize the TabStrip
 $(document).ready(function(){
     $("#tabstrip").kendoTabStrip();
 });

Selecting a default tab using the TabStrip API

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

 //Initialize the TabStrip and select first tab
 $(document).ready(function(){
     var tabstrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
     tabstrip.select(tabstrip.tabGroup.children("li:first"));
 });

No code

animation: Object

A collection of Animation objects, used to change default animations. A value of false will disable all animations in the component.

close: Animation

The animation that will be used when closing content.

open: Animation

The animation that will be used when opening content.

append (tab)
Appends a TabStrip item to the end of the tab list.
Example
```
tabStrip.append(
    [{
        text: "Item 1"
    },
    {
        text: "Item 2"
    }]
);
```
Parameters

tab: Selector

Target tab, specified as a JSON object. Can also handle an array of such objects.
disable (element)

Disables a TabStrip tab

Parameters

element: Selector

Target element
enable (element, enable)

Enables/disables a TabStrip tab

Parameters

element: Selector

Target element

enable: Boolean

Desired state
insertAfter (item, referenceTab)
Inserts a TabStrip tab after the specified referenceTab
Example
```
tabStrip.insertAfter(
    [{
        text: "Item 1"
    },
    {
        text: "Item 2"
    }],
    referenceItem
);
```
Parameters

item: Selector

Target tab, specified as a JSON object. Can also handle an array of such objects.

referenceTab: Item

A reference tab to insert the new item after
insertBefore (item, referenceTab)
Inserts a TabStrip item before the specified referenceItem
Example
```
tabStrip.insertBefore(
    [{
        text: "Item 1"
    },
    {
        text: "Item 2"
    }],
    referenceItem
);
```
Parameters

item: Selector

Target tab, specified as a JSON object. Can also handle an array of such objects.

referenceTab: Item

A reference tab to insert the new item before
reload (element)

Reloads a TabStrip tab from ajax request

Parameters

element: Selector

Target element
remove (element)
Removes the specified TabStrip item/s
Example
```
tabStrip.remove("#Item1");
```
Parameters

element: Selector

Target item selector.
select (element)
Selects the specified TabStrip tab/s. If called without arguments - returns the selected tab.
Example
```
tabStrip.select("#Item1");
```
Parameters

element: Selector

Target item selector.

contentLoad

Fires when content is fetched from an ajax request.

Event data

item : Element: The selected item
item : Element: The loaded content element

error

Fires when ajax request results in an error.

Event data

xhr : jqXHR: The jqXHR object used to load the content
status : String: The returned status.

select

Fires before a tab is selected.

Event data

item : Element: The selected item

Kendo

Skin

Getting Started

In a HTML div, create an HTML unordered list for tabs, HTML divs for content

Initialize the TabStrip using a jQuery selector to target the outer div

Loading TabStrip content with Ajax

Loading Tab content asynchronously

Dynamically configure TabStrip tabs

Dynamically add a new Tab

Selecting a Tab on Initial Load

Selecting a default tab manually using HTML

Selecting a default tab using the TabStrip API

Example

Parameters

Parameters

Parameters

Example

Parameters

Example

Parameters

Parameters

Example

Parameters

Example

Parameters

Event data

Event data

Event data