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

<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

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.

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.

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>