All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.UI.Tabs class

The Tabs Component offers a simple way to build a tab-separated layout, allowing you to offer multiple content panes in the same space with intuitive navigation. This component requires your markup to have:

  • A container element (this is what you call the Ink.UI.Tabs constructor on), containing everything below.
  • An element with the tabs-nav class, to contain links.
  • Your links with href="#ID_OF_SECTION"
  • Your sections with the corresponding id attributes and the tabs-content class.
  • The content for each section.

When the user clicks in the links inside tabs-nav, the tab with the corresponding ID is then activated. The active tab when the tab component is initialized has its hash in the browser URL. If there is no hash, then the active option kicks in. Otherwise, Tabs will fall back to showing the tab corresponding to the first link.

You can disable some (or all) tabs by passing an array for the disabled option, or by adding the ink-disabled class to tab links.

Methods
Method name Description
new Tabs(selector, [options]) Constructor
.activeContentTab() Gets the currently active section
.activeMenuLink() Gets the currently active Menu link (the links which the user clicks on to change tabs)
.activeTab() Returns the active tab id
.changeTab(selector) Changes the active tab
.destroy() Unregisters the component and removes its markup
.disable(selector) Disables the desired tab
.enable(selector) Enables the desired tab

new Ink.UI.Tabs(selector, [options])

Accepts

  • selector

    Your container element. You can pass in a pure DOM element or a selector.
  • options

    Options object, containing:
  • options.preventUrlChange

    falseFlag that determines if follows the link on click or stops the event
  • options.active

    ID of the tab to activate on creation if the window hash is not already a tab ID.
  • options.onBeforeChange

    Callback to be executed before changing tabs.
  • options.onChange

    Callback to be executed after changing tabs.
  • options.menuSelector

    '.tabs-nav'Selector to find your tab links.
  • options.contentSelector

    '.tabs-content'Selector to find your tab content panes.
  • options.triggerEventsOnLoad

    trueCall the above callbacks after this component is created.

Demo

Home

A home is a dwelling-place used as a permanent or semi-permanent residence for an individual, family, household or several families in a tribe. It is often a house, apartment, or other building, or alternatively a mobile home, houseboat, yurt or any other portable shelter. Larger groups may live in a nursing home, children's home, convent or any similar institution. A homestead also includes agricultural land and facilities for domesticated animals. Where more secure dwellings are not available, people may live in the informal and sometimes illegal shacks found in slums and shanty towns. More generally, "home" may be considered to be a geographic area, such as a town, village, suburb, city, or country

News

News is the communication of selected[1] information on current events. It is shared in various ways: among individuals and small groups (such as by word of mouth or newsletters); with wider audiences (such as by publishing, either in print or online, or broadcasting, such as on television or radio); or in ways that blend those traits (such as when social media sharing starts among individuals but goes viral).

Stuff

Stuff or Stuffed may refer to:

  • Stuff (cloth), woven cloth or fabric or fiber
  • Stuffing, a substance placed in cavities of food items, often a turkey or by its self
  • Stuffed toy, a children's toy, created through the art of taxidermy
  • Stuff.co.nz, news website of Fairfax New Zealand
  • Physical matter

Code

<!-- replace 'top' with 'bottom', 'left' or 'right' to reposition navigation -->
<div id="myTabs" class="ink-tabs top">
    <!-- If you're using 'bottom' positioning, put this div AFTER the content. -->
    <ul class="tabs-nav">
        <li><a class="tabs-tab" href="#home">Home</a></li>
        <li><a class="tabs-tab" href="#news">News</a></li>
        <li><a class="tabs-tab" href="#stuff">Stuff</a></li>
    </ul>

    <!-- Now just place your content -->
    <div id="home" class="tabs-content">
        <h1 class="fw-300">Home</h1>
        <p>
            A home is a dwelling-place used as a permanent or semi-permanent residence for an individual, family, household or several families in a tribe. It is often a house, apartment, or other building, or alternatively a mobile home, houseboat, yurt or any other portable shelter. Larger groups may live in a nursing home, children's home, convent or any similar institution. A homestead also includes agricultural land and facilities for domesticated animals. Where more secure dwellings are not available, people may live in the informal and sometimes illegal shacks found in slums and shanty towns. More generally, "home" may be considered to be a geographic area, such as a town, village, suburb, city, or country
        </p>
    </div>
    <div id="news" class="tabs-content">
        <h1 class="fw-300">News</h1>
        <p>
            News is the communication of selected[1] information on current events. It is shared in various ways: among individuals and small groups (such as by word of mouth or newsletters); with wider audiences (such as by publishing, either in print or online, or broadcasting, such as on television or radio); or in ways that blend those traits (such as when social media sharing starts among individuals but goes viral).
        </p>
    </div>
    <div id="stuff" class="tabs-content">
        <h1 class="fw-300">Stuff</h1>
        <p>Stuff or Stuffed may refer to:<p>
        <ul>
            <li>Stuff (cloth), woven cloth or fabric or fiber</li>
            <li>Stuffing, a substance placed in cavities of food items, often a turkey or by its self</li>
            <li>Stuffed toy, a children's toy, created through the art of taxidermy</li>
            <li>Stuff.co.nz, news website of Fairfax New Zealand</li>
            <li>Physical matter</li>
        </ul>
    </div>
</div>

<script>
    Ink.requireModules( ['Ink.Dom.Selector_1','Ink.UI.Tabs_1'], function( Selector, Tabs ){
        var tabsObj = new Tabs('#myTabs');
    });
</script>

.activeContentTab() method

Gets the currently active section

(Each section contains content for a tab, and must have an id attribute)

.activeTab() method

Returns the active tab id

.changeTab(selector) method

Changes the active tab

Pass a selector/element identifying what tab you want

Accepts

  • selector

    Selector of the desired tab or the link that links to it

.destroy() method

Unregisters the component and removes its markup

.disable(selector) method

Disables the desired tab

Accepts

  • selector

    the id of the desired tab or the link that links to it

.enable(selector) method

Enables the desired tab

Accepts

  • selector

    The id of the desired tab or the link that links to it