Tabs

Tabs are a good way to organize content in hidden sections and open only the box that is needed at the moment.

Usage

Here's an example of basic tabs setup. For each tab there's a corresponding section or div, which contains the body of the tab (it can be any kind of HTML).

Home

Contented get distrusts certainty nay are frankness concealed ham. On unaffected resolution on considered of. No thought me husband or colonel forming effects. End sitting shewing who saw besides son musical adapted. Contrasted interested eat alteration pianoforte sympathize was. He families believed if no elegance interest surprise an. It abode wrong miles an so delay plate. She relation own put outlived may disposed.

Shop

Detract yet delight written farther his general. If in so bred at dare rose lose good. Feel and make two real miss use easy. Celebrated delightful an especially increasing instrument am. Indulgence contrasted sufficient to unpleasant in in insensible favourable. Latter remark hunted enough vulgar say man. Sitting hearted on it without me.

Catalog

As am hastily invited settled at limited civilly fortune me. Really spring in extent an by. Judge but built gay party world. Of so am he remember although required. Bachelor unpacked be advanced at. Confined in declared marianne is vicinity.

T-Shirts

Debating me breeding be answered an he. Spoil event was words her off cause any. Tears woman which no is world miles woody. Wished be do mutual except in effect answer. Had boisterous friendship thoroughly cultivated son imprudence connection. Windows because concern sex its. Law allow saved views hills day ten. Examine waiting his evening day passage proceed.

Brand

Able an hope of body. Any nay shyness article matters own removal nothing his forming. Gay own additions education satisfied the perpetual. If he cause manor happy. Without farther she exposed saw man led. Along on happy could cease green oh.

<nav class="tabs" data-kube="tabs" data-equal="true">
    <a href="#tab1" class="is-active">...</a>
    <a href="#tab2">...</a>
    <a href="#tab3">...</a>
</nav>

<section id="tab1">...</section>
<section id="tab2">...</section>
<section id="tab3">...</section>

Settings

equal

Type: Boolean

Default: false

Making all tabs in a set equal width.

<nav class="tabs" data-kube="tabs" data-equal="true"></nav>

Events

Event	Description
`opened`	This event is fired when the tab section has been opened.

Catch events in your module:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            tabs: {
                opened: function(sender)
                {
                    console.log('Tab box is opened.');
                }
            }
        }
    });
})(Kube);

Catch events from a specific tabs module

Set an ID:

<nav id="mytabs" class="tabs" data-kube="tabs">
    <a href="#tab1">...</a>
</nav>

<section id="tab1">...</section>

Or set data-name attribute:

<nav class="tabs" data-name="mytabs" data-kube="tabs">
    <a href="#tab1">...</a>
</nav>

<section id="tab1">...</section>

Catch events in your module by the specified ID or data-name:

(function($K)
{
    $K.add('module', 'my-module', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            tabs: {
                opened: function(sender)
                {
                    if (sender._id === 'mytabs')
                    {
                        console.log('Tab box from #mytabs is opened.');
                    }
                }
            }
        }
    });
})(Kube);

Methods

Method	Description
`getActiveTab`	Return the DOM element of active tab link.
`getActiveBox`	Return the DOM element of active tab box.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            tabs: {
                opened: function(sender)
                {
                    // get active tab and box
                    var $tab = sender.getActiveTab();
                    var $box = sender.getActiveBox();
                }
            }
        }
    });
})(Kube);