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.
active
¶ type: jQuery
The currently active tab
-
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