Tabbed Interface
Looking for WET v3.1?
As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.
Purpose
Dynamically stacks multiple sections of content, transforming them into a tabbed interface. Implements the WAI-ARIA tab panel design pattern for large screens and the WAI-ARIA accordion design pattern for small screens.
Working example
How to implement
Tabbed interface
- Add a
divelement to the page with the classwb-tabs. - Add a
divelement to the previousdivelement with the classtabpanels. - For each tab panel, add a
detailselement with a uniqueid. Addopen="open"for the tab panel that should be open by default.<div class="wb-tabs"> <div class="tabpanels"> <details id="details-panel1"> ... </details> <details id="details-panel2" open="open"> ... </details> - Add a
summaryelement with the label of the tab to eachdetailselement.<details id="details-panel1"> <summary>Example 1</summary> ... </details> <details id="details-panel2" open="open"> <summary>Example 2</summary> ... </details> - Add the tab panel content after each
summaryelement.
Code
<div class="wb-tabs">
<div class="tabpanels">
<details id="details-panel1">
<summary>Example 1</summary>
<p>
...
</p>
</details>
<details id="details-panel2" open="open">
<summary>Example 2</summary>
<p>
...
</p>
</details>
...
</div>
</div>
Carousel
- Add a
divelement to the page with the classwb-tabsand either the styling classcarousel-s1orcarousel-s2. - Add a
divelement to the previousdivelement with the classtabpanels. - For each tab panel, add a
divelement with a unique id,role="tabpanel"andclass="out". For the tab panel that should be opened by default, replace theoutclass within. - Specify the tab panel transition type by adding one of the following classes to the
divelement for each of the tab panels:fade: Fading transitionslide: Horizontal sliding transitionslidevert: Vertical sliding transition
<div class="wb-tabs carousel-s1"> <div class="tabpanels"> <div role="tabpanel" id="panel1" class="in fade"> </div> <div role="tabpanel" id="panel2" class="out fade"> </div> </div> </div> - Add a
figureelement to each tab panel. - Add content to each
figureelement:- Image: Add an image to the
figureelement followed by afigcaptionelement with the caption for the tab panel.<div role="tabpanel" id="panel1" class="in fade"> <figure> <img src="img/protect-environment.jpg" alt="Panel 1" /> <figcaption> <p> Take Note: <a href="http://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">Renewal of the Aviation Document Booklet</a> <br /> Learn more about <a href="http://www.tc.gc.ca/eng/air-menu.htm">air transportation</a> in Canada. </p> </figcaption> </figure> </div> - Video: Add a multimedia player to the
figureelement according to the multimedia player documentation.<div role="tabpanel" id="panel1" class="in fade"> <figure class="wb-mltmd"> <video poster="http://www.servicecanada.gc.ca/eng/video/images/te-lj-eng.jpg" title="Looking for a Job"> <source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.webm" /> <source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.mp4" /> <track src="../multimedia/cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" /> </video> <figcaption> <p>Looking for a Job (<a href="http://www.servicecanada.gc.ca/eng/video/lj.shtml">Transcript</a>)</p> </figcaption> </figure> </div> - Other content: Add content to the
figureelement followed by afigcaptionelement with the caption for the tab panel.<div role="tabpanel" id="panel1" class="in fade"> <figure> <table> ... </table> <figcaption> <p>Tab panel caption</p> </figcaption> </figure> </div>
- Image: Add an image to the
- Add a
ulelement withrole="tablist"at the start of thedivelement with thewb-tabsclass. - For each tab panel, add an
lielement to the previousulelement. Addclass="active"for the tab panel that should be open by default. - Add an
aelement to eachlielement - Add to each
lielement anaelement with the label of the tab and that links to the associated tab panel.<ul role="tablist"> <li class="active"><a href="#panel27">Tab 1</a></li> <li><a href="#panel28">Tab 2</a></li> ... </ul> - Optional: Override the default settings using the configuration options.
Code
<div class="wb-tabs carousel-s1">
<ul role="tablist">
<li class="active"><a href="#panel1">Tab 1</a></li>
<li><a href="#panel2">Tab 2</a></li>
...
</ul>
<div class="tabpanels">
<div role="tabpanel" id="panel1" class="in fade">
<figure>
<img src="img/protect-environment.jpg" alt="Panel 1" />
<figcaption>
<p>
...
</p>
</figcaption>
</figure>
</div>
<div role="tabpanel" id="panel2" class="out fade">
<figure>
<img src="img/banff.jpg" alt="Panel 2" />
<figcaption>
<p>
...
</p>
</figcaption>
</figure>
</div>
...
</div>
</div>
Configuration options (carousel only)
| Option | Description | How to configure | Values |
|---|---|---|---|
| Carousel style | Configures the carousel style. | Add the value after the wb-tabs class (e.g., class="wb-tabs carousel-s1") |
|
Change rotation speed (data-wb-tabs) |
Configure the tab rotation speed through the interval property of the data-wb-tabs attribute. |
Add the data-wb-tabs attribute to the element with class="wb-tabs" and include the interval property with the number of seconds between tab rotations.
|
|
Change rotation speed (slow, fast) |
Configure the tab rotation speed through either the slow or fast classes. |
Add either slow or fast after the wb-tabs class.
|
|
| Tab panel transitions | Configure the tab panel transition type through the fade, slide or slidevert classes. |
Add fade, slide or slidevert after the in or out class on each tab panel.
|
|
Exclude play (data-wb-tabs) (v4.0.5+) |
Exclude the play button from the carousel controls through the excludePlay property of the data-wb-tabs attribute. |
Add the data-wb-tabs attribute to the element with class="wb-tabs" and include the excludePlay property with true for the value.
|
|
Exclude play (exclude-play) (v4.0.5+) |
Exclude the play button from the carousel controls through the exclude-play class. |
Add exclude-play after the wb-tabs class.
|
|
Play on page load (data-wb-tabs) (v4.0.5+) |
Play the carousel on page load through the playing property of the data-wb-tabs attribute.Warning: Playing on page load can be distracting and cause usability issues for some users. Note: Playing will be disabled if the play button is excluded from the carousel controls. |
Add the data-wb-tabs attribute to the element with class="wb-tabs" and include the playing property with true for the value.
|
|
Play on page load (playing) |
Play the carousel on page load through the playing class.Warning: Playing on page load can be distracting and cause usability issues for some users. Note: Playing will be disabled if the play button is excluded from the carousel controls. |
Add playing after the wb-tabs class.
|
|
Events
| Event | Trigger | What it does |
|---|---|---|
wb-init.wb-tabs |
Triggered manually (e.g., $( ".wb-tabs" ).trigger( "wb-init.wb-tabs" );). |
Used to manually initialize the Tabbed interface plugin. Note: The Tabbed interface plugin will be initialized automatically unless the required markup is added after the page has already loaded. |
wb-ready.wb-tabs (v4.0.5+) |
Triggered automatically after a tabbed interface or carousel initializes. | Used to identify which tabbed interface or carousel was initialized (target of the event)
|
wb-updated.wb-tabs (v4.0.5+) |
Triggered automatically after a tabbed interface/carousel was updated (visible tab panel changed). | Used to identify which tabbed inteface/carousel was updated (target of the event) and to pass along the newly visible panel (as a jQuery object).
|
wb-shift.wb-tabs (carousel only) |
Triggered manually or automatically to change which tab panel is visible. | Changes which tab panel is visible. The value of shiftto is the number of tab panels to move forwards (positive number) or backwards (negative number).
|
wb-ready.wb (v4.0.5+) |
Triggered automatically when WET has finished loading and executing. | Used to identify when all WET plugins and polyfills have finished loading and executing.
|
Source code
- Date modified: