Tabbed Navigation

To make effective use of screen space, it often makes sense to sibling concepts into a tabbed navigation area. The Tabs() class helps to implement this easily. Simply create instances of the Tabs() class when you register event listeners for your UI element and the instance will do the rest of the work for you.

class Tabs(tabs)

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

Arguments:
  • tabs (HTMLElement|JQuery) – An HTML element or JQuery object representing the tab navigation container.

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")
});
Tabs.activateTab(tab)

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.

Tabs.active

type: jQuery

The currently active tab

Tabs.callback

type: function

The callback function to trigger when a Tab is activated

Tabs.container

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

Tabs.group

type: jQuery

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

Tabs.tabs

type: jQuery

The collection of tabs