Tabs
Tabs are a good way to organize content in hidden sections and open only the box that is needed at the moment.
Usage
Here's an example of basic tabs setup. For each tab there's a corresponding section or div, which contains the body of the tab (it can be any kind of HTML).
Home
Contented get distrusts certainty nay are frankness concealed ham. On unaffected resolution on considered of. No thought me husband or colonel forming effects. End sitting shewing who saw besides son musical adapted. Contrasted interested eat alteration pianoforte sympathize was. He families believed if no elegance interest surprise an. It abode wrong miles an so delay plate. She relation own put outlived may disposed.
Shop
Detract yet delight written farther his general. If in so bred at dare rose lose good. Feel and make two real miss use easy. Celebrated delightful an especially increasing instrument am. Indulgence contrasted sufficient to unpleasant in in insensible favourable. Latter remark hunted enough vulgar say man. Sitting hearted on it without me.
Catalog
As am hastily invited settled at limited civilly fortune me. Really spring in extent an by. Judge but built gay party world. Of so am he remember although required. Bachelor unpacked be advanced at. Confined in declared marianne is vicinity.
T-Shirts
Debating me breeding be answered an he. Spoil event was words her off cause any. Tears woman which no is world miles woody. Wished be do mutual except in effect answer. Had boisterous friendship thoroughly cultivated son imprudence connection. Windows because concern sex its. Law allow saved views hills day ten. Examine waiting his evening day passage proceed.
Brand
Able an hope of body. Any nay shyness article matters own removal nothing his forming. Gay own additions education satisfied the perpetual. If he cause manor happy. Without farther she exposed saw man led. Along on happy could cease green oh.
<nav class="tabs" data-kube="tabs" data-equal="true"> <a href="#tab1" class="is-active">...</a> <a href="#tab2">...</a> <a href="#tab3">...</a> </nav> <section id="tab1">...</section> <section id="tab2">...</section> <section id="tab3">...</section>
Settings
equal
Type: Boolean
Default: false
Making all tabs in a set equal width.
<nav class="tabs" data-kube="tabs" data-equal="true"></nav>
Events
Event | Description |
---|---|
opened |
This event is fired when the tab section has been opened. |
Catch events in your module:
(function($K) { $K.add('module', 'mymodule', { init: function(app, context) { this.app = app; }, // catch event onmessage: { tabs: { opened: function(sender) { console.log('Tab box is opened.'); } } } }); })(Kube);
Catch events from a specific tabs module
Set an ID:
<nav id="mytabs" class="tabs" data-kube="tabs"> <a href="#tab1">...</a> </nav> <section id="tab1">...</section>
Or set data-name
attribute:
<nav class="tabs" data-name="mytabs" data-kube="tabs"> <a href="#tab1">...</a> </nav> <section id="tab1">...</section>
Catch events in your module by the specified ID or data-name:
(function($K) { $K.add('module', 'my-module', { init: function(app, context) { this.app = app; }, // catch event onmessage: { tabs: { opened: function(sender) { if (sender._id === 'mytabs') { console.log('Tab box from #mytabs is opened.'); } } } } }); })(Kube);
Methods
Method | Description |
---|---|
getActiveTab |
Return the DOM element of active tab link. |
getActiveBox |
Return the DOM element of active tab box. |
(function($K) { $K.add('module', 'mymodule', { init: function(app, context) { this.app = app; }, // catch event onmessage: { tabs: { opened: function(sender) { // get active tab and box var $tab = sender.getActiveTab(); var $box = sender.getActiveBox(); } } } }); })(Kube);