Tab Controlcomponent

Bring your tabs to life with a simple plugin to toggle between content via tabs. This component required metro-tab-control.js.

Definition

To make tabs tabbable, create a .tab-control with unique ID for every tab and wrap them in .frame.

Tab 1
Other Tab

First Tab

Second Tab

Rocket Tab

This tab placed right

This tab also placed right

<div class="tab-control" data-role="tab-control">
    <ul class="tabs">
        <li class="active"><a href="#_page_1">Tab 1</a></li>
        <li><a href="#_page_2">Other Tab</a></li>
        <li><a href="#_page_3"><i class="icon-rocket"></i></a></li>
        <li class="place-right"><a href="#_page_4"><i class="icon-cog"></i></a></li>
    </ul>

    <div class="frames">
        <div class="frame" id="_page_1">...</div>
        <div class="frame" id="_page_2">...</div>
        <div class="frame" id="_page_3">...</div>
    </div>
</div>

Tab in Tab

Now you can create tab control in tab control.

Tab 1
Other Tab

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Tab 2.1
Other Tab 2.1

Content Tab 1

Nam tempus lectus ac dignissim feugiat.
Nam consectetur sem ut lectus venenatis, at facilisis lectus cursus.
Fusce varius massa a erat sollicitudin cursus.

Rocket Page

Usage

To activate tab-control with data-api you can add attribute data-role="tab-control" to component.

<div class="tab-control" data-role="tab-control">...</div>

Call tab control manually with:

$('.tab-control').tabcontrol();

Tab content showing effect

You can add tab content showing effect with effect parameter.

Tab 1
Tab 2
Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis mollis arcu. Nam nibh nisi, tincidunt non tristique ut, venenatis quis sapien. Proin at sagittis magna, non pharetra nisi. Pellentesque consectetur tellus metus, in feugiat risus pulvinar ut. Suspendisse magna enim, ornare vitae augue non, elementum feugiat arcu.

Aliquam ornare libero eget leo imperdiet varius. Aenean fringilla orci volutpat enim lobortis, id elementum lectus consectetur. Integer id ante nec ligula consectetur rutrum imperdiet vel tellus. Nam a lectus placerat, pretium risus ut, rutrum orci.

Duis malesuada, dolor eu sollicitudin sagittis, leo sapien vehicula nunc, lobortis ornare tellus augue ac augue. Suspendisse sagittis sit amet ante ac suscipit. Duis ligula metus, auctor ut risus et, blandit suscipit lectus. Pellentesque cursus adipiscing tortor at malesuada.

Effect with data-api:

<div class="tab-control" data-effect="fade[slide]">...</div>

Effect with javascript:

$('.tab-control').tabcontrol({
    effect: 'fade' // or 'slide'
});

Events

When tab switched, tab control triggered event change. You can bind this event to additional manipulating with tab content.

$('.tab-control').tabcontrol().bind("tabcontrolchange", function(event, frame){...});

Tab 1
Tab 2
Tab 3

Click on tabs

<script>
    $(function(){
        $("#tab-with-event").tabcontrol().bind("tabcontrolchange", function(event, frame){
            var id = $(frame).attr("id");
            $(frame).html("Show in time " + (new Date()).getTime() + " frame id:"+id);
        })
    })
</script>