Tabs

Tabs in Kube are crafted the way one would expect from the world's best CSS framework. With versatile API, wide range of settings an options, with callbacks and live examples. Take a look!.

Base

Here's an example of basic tabs setup. Tabs bar is an unordered list, and each tab in tabs bar is a list item. For each tab there's a corresponding div, which contains the body of the tab (it can be any kind of HTML).

Home

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<nav class="tabs" data-component="tabs">
    <ul>
        <li class="active"><a href="#tab1">...</a></li>
        <li><a href="#tab2">...</a></li>
    </ul>
</nav>

<div id="tab1">...</div>
<div id="tab2">...</div>

JavaScript behavior

Tabs are interactive elements, and can be opened, closed, switched, destroyed and selected programmatically via JavaScript. Try this example, poke around and then have a look at the self-explanatory code example below.

Home

Shop

Catalog

T-Shirts

Brand

<button onclick="$('#tabs').tabs('destroy');">destroy</button>
<button onclick="$('#tabs').tabs('prev');">prev</button>
<button onclick="$('#tabs').tabs('next');">next</button>
<button onclick="$('#tabs').tabs('open', 4);">open</button>
<button onclick="$('#tabs').tabs('close', '#tab4');">close</button>
<button onclick="$('#tabs').tabs('closeAll');">closeAll</button>

<nav id="tabs" class="tabs" data-component="tabs">
<ul>
<li><a href="#tab1">Home</a></li>
<li class="active"><a href="#tab2">Shop</a></li>
<li><a href="#tab3">Catalog</a></li>
<li><a href="#tab4">T-Shirts</a></li>
<li><a href="#tab5">Brand</a></li>
</ul>
</nav>

<div id="tab1">...</div>
<div id="tab2">...</div>
<div id="tab3">...</div>
<div id="tab4">...</div>
<div id="tab4">...</div>

Equals

Often it is important to create tabs that are equal in width regardless of content. data-equals is here to help you with this task.

Tab 1

Tab 2

...

<nav class="tabs" data-component="tabs" data-equals="true">
    <ul>
        <li class="active"><a href="#tab1">...</a></li>
        <li><a href="#tab12">...</a></li>
    </ul>
</nav>

<div id="tab1">...</div>
<div id="tab2">...</div>

Livetabs

Livetabs provide a very seamless and smooth experience by blending content and tabs in this kind of live manner. Set up data-live class, and make sure your tabs have this same class. It's that simple.

General

This is very General Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Additional

Quite an additional is displayed here: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<nav id="livetabs" data-component="tabs" data-live=".tab-live"></nav>

<div id="tab-general" data-title="General" class="tab-live">...</div>
<div id="tab-additional" data-title="Additional" class="tab-live">...</div>

Active

To denote active tab, and to let users know where they are, use class active.

<nav class="tabs">
    <ul>
        <li><a href="">...</a></li>
        <li class="active"><a href="">...</a></li>
        <li><a href="">...</a></li>
    </ul>
</nav>

Settings

equals

Type: boolean
Default: false

Making all tabs in a set equal width

active

Type: string
Default: false

Responsible for denoting active tab.

live

Type: string
Default: false

Responsible for live tabs (see Livetabs example)

hash

Type: boolean
Default: true

This will add a hash and an ID to the URL.

Callbacks

init

$('#tabs').on('init.tabs', function()
{
    // do something...
});

$('#tabs').on('next.tabs', function($item)
{
    // do something...
});

$('#tabs').on('prev.tabs', function($item)
{
    // do something...
});

open

$('#tabs').on('open.tabs', function()
{
    // do something...
});

opened

$('#tabs').on('opened.tabs', function()
{
    // do something...
});

close

$('#tabs').on('close.tabs', function()
{
    // do something...
});

closed

$('#tabs').on('closed.tabs', function()
{
    // do something...
});

API

open

$('#tabs').tabs('open', 1);

// or

$('#tabs').tabs('open', '#tab1');

close

$('#tabs').tabs('close', 1);

// or

$('#tabs').tabs('close', '#tab1');

closeAll

$('#tabs').tabs('closeAll');

$('#tabs').tabs('next');

$('#tabs').tabs('prev');

destroy

$('#tabs').tabs('destroy');