Odo Tabs
A component for switching between panes of content.
Support
IE9+
Dependencies
Odo Window Events, Odo Helpers, TinyEmitter
Styles
This component has required css - css/odo-tabs.css. The theme (css/odo-tabs-theme.css) should also be included and customized to your design.
Default Tabs
By default, the tabs component provides keyboard navigation, aria roles & states, and tab functionality.
Pane 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Pane 2
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Pane 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Pane 4
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Markup
The odo-tabs__tab class, href attribute on the anchor, and id attribute on the tab pane are required. The odo-tabs__pane elements must also have a common parent. The component will add aria roles to the existing elements and id attributes to the anchors if they do not have one.
If there are images inside the tab panes, either set their width and height, or wrap it in an aspect ratio box so that once it loads, it does not create extra height. If you cannot do either of these things, listen for the load event of the image and call the update method on tabs.
<ul id="tabs-demo" class="tabs-list">
<li class="odo-tabs__tab"><a href="#demo1_pane1" class="demo-tab">Tab 1</a></li>
<li class="odo-tabs__tab"><a href="#demo1_pane2" class="demo-tab">Tab 2</a></li>
<li class="odo-tabs__tab"><a href="#demo1_pane3" class="demo-tab">Tab 3</a></li>
<li class="odo-tabs__tab"><a href="#demo1_pane4" class="demo-tab">Tab 4</a></li>
</ul>
<div class="odo-tabs__panes">
<div id="demo1_pane1" class="odo-tabs__pane"><h4>Pane 1</h4></div>
<div id="demo1_pane2" class="odo-tabs__pane"><h4>Pane 2</h4></div>
<div id="demo1_pane3" class="odo-tabs__pane"><h4>Pane 3</h4></div>
<div id="demo1_pane4" class="odo-tabs__pane"><h4>Pane 4</h4></div>
</div>JavaScript
var tabs = new OdoTabs(document.getElementById('tabs-demo'));Deep Linking
By adding the data-hash attribute to the anchor, the tabs component will change the URL's hash when a tab changes. It also listens for the hashchange event and navigates to the correct tab if it finds a match.
Dolphin
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lemming
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tyrannosaurus
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Shark
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Markup
The markup is similar to the first demo. Only the ids have changed and data-hash has been added.
<li class="odo-tabs__tab"><a data-hash="dolphin" href="#demo2_pane1" class="demo-tab">Dolphin</a></li>
<li class="odo-tabs__tab"><a data-hash="lemming" href="#demo2_pane2" class="demo-tab">Lemming</a></li>
<li class="odo-tabs__tab"><a data-hash="tyrannosaurus" href="#demo2_pane3" class="demo-tab">Tyrannosaurus</a></li>
<li class="odo-tabs__tab"><a data-hash="shark" href="#demo2_pane4" class="demo-tab">Shark</a></li>Events
Each instance is an event emitter which inherits from TinyEmitter and emits two events: OdoTabs.EventType.WILL_SHOW and OdoTabs.EventType.DID_SHOW. If you call preventDefault() on the WILL_SHOW event, the new tab will not be shown.
tabs.on(OdoTabs.EventType.WILL_SHOW, (evt) => {
evt.preventDefault();
});