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.

<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);