JAVASCRIPT
Display tabbed content
All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section
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:
tabs-nav class, to contain links.href="#ID_OF_SECTION"id attributes and the tabs-content class.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.
| 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 |
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 eventoptions.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
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 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 or Stuffed may refer to:
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>Gets the currently active section
(Each section contains content for a tab, and must have an id attribute)
Gets the currently active Menu link (the links which the user clicks on to change tabs)
Returns the active tab id
Changes the active tab
Pass a selector/element identifying what tab you want
selector
Selector of the desired tab or the link that links to itUnregisters the component and removes its markup
Disables the desired tab
selector
the id of the desired tab or the link that links to itEnables the desired tab
selector
The id of the desired tab or the link that links to it