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

A link

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

A link

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

A link

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

A link

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();
});