TabStrip Plugin

Add tab navigation to a web page or application.

TabStrip Explorer
TabStrip Explorer - See it in Action

Syntax:
$(“…”).tabstrip(options)
$(“…”).tabstrip(“select”, index)

To include the TabStrip Plugin inside a web page use: html.include(“rich/tabstrip”)

tabstrip(options)
This converts an unordered list into a list of tabs. Each clickable list item must include an anchor tag as shown below: 


    <ul class="tabstrip">
        <li><a href="#items">Products</a></li>
        <li class="selected"><a href="#service">Service</a></li>
    </ul>

    <div id="items">Products Tab container</div>
    <div id="service">Service Tab container</div>

In the above example, the #item and #service anchors are used to represent the ID of the element (such as a div) that should be displayed when the tab is selected.

To dynamically load content into the tab container when the tab is selected, simply add the url for the web page to the anchor tag as shown below:


    <ul class="tabstrip">
        <li><a href="/myproducts.html#items">Products</a></li>
    </ul>

To load a specific element from the web page and into the selected tab container, add the css selector for the element to the end of the url as shown below:


    <ul class="tabstrip">
        <li><a href="/myproducts.html#items;div.products">Products</a></li>
    </ul>
TabStrip options
NameDescription
animateMixed. Used to enable (true) or disable (false) tab animations. Defaults to true. If a callback function is used as the value for this option, then the plugin will call the function to create custom animations. The callback function will be called with three parameters. The first being the index of the selected tab, while the second and third parameters are jQuery objects that are linked to the current and previous tab containers.
themeString. Used to specify the name of the CSS class to apply to the tabstrip.
tabclickFunction. This function will be called whenever a tab is selected. Use the event.data object to retrieve the index and container id. 

    <script type="text/javascript">
        html.ready(function(){
            $(".tabstrip").tabstrip({
                theme:'nicetab',
                tabclick: function(event) {
                    alert(event.data.index);
                    alert(event.data.container);
                }
            })
        });
    </script>

tabstrip(“select”,index)
Used to select the specified tab index.

ParameterDescription
indexInteger. Tab index ranging from 0 to n-1 tabs, where n is the total number of tabs.

To see the TabStrip Plugin in action visit the TabStrip Explorer web page.