Tabs

Tabs

A helper class for creating tabbed containers. Create one Tabs instance per tabbed navigation container in your application.

Constructor

new Tabs(tabs)

Source:
Examples
<!-- Example HTML -->
<nav class="tabs" data-group="group1">
 <a class="item" data-tab="tab1">Tab 1</li>
 <a class="item" data-tab="tab2">Tab 2</li>
</nav>

<div class="tab" data-tab="tab1" data-group="group1">Content 1</div>
<div class="tab" data-tab="tab2" data-group="group1">Content 2</div>
// JavaScript Listener
let nav = $('.tabs[data-group="group1"]');
new Tabs(nav, {
  initial: "tab1",
  callback: t => console.log("Tab ${t} was clicked")
});
Parameters:
Name Type Description
tabs HTMLElement | JQuery

An HTML element or JQuery object representing the tab navigation container.

Members

active :jQuery

Source:

The currently active tab element

Type:
  • jQuery

callback :function

Source:

The callback function to trigger when a Tab is activated

Type:
  • function

container

Source:

The container element within which both the tab navigation and the tab content exists

group :jQuery

Source:

The named tab group Retrieved as a property since the composition of the DOM may change over time

Type:
  • jQuery

tab :string

Source:

The currently active tab name

Type:
  • string

tabs :jQuery

Source:

The collection of tabs

Type:
  • jQuery

Methods

activateTab(tab)

Source:

Activate a tab by it's name. This gets called automatically when a tab in the navigation is clicked, however you may also call this function directly.

Parameters:
Name Type Description
tab jQuery

The tab control being activated