Tabbed interface
Project Lead: Stephane Berube (@berubs)
The tabbed interface can be modified to suit different sizes and displays
- Supports multiple tabs on the same page.
- Supports multiple design options.
- Supports setting the default tab
- Supports automatic tab rotation and allows the rotation speed to be configured
- Allows tab panels to be forced to the same height (height of the tallest tab panel)
- Compatible with the CSS Grid System
- Conforms to WCAG 2.0 AA
- Uses WAI-ARIA to enhance accessibility
- Progressive enhancement approach
- To display multiple pieces of content with the same format.
- The tabbed interface can be used as a slideshow to display images.
When using this feature to display images, corresponding numbers should be displayed that indicate which image is currently being displayed, as in this example on the Canadian Crown website.
When using the tabbed interface to display text (as in this example on Canada.gc.ca), the transition speed must allow enough time for the user to read the text displayed.
When used to promote web content, selecting text or an image should take the user to a new page.
Users must be able to pause (or re-start) rotating tabs.
- When used to promote web content, selecting text or an image should take the user to a new page.
- Create a tab container for each set of tabs using <div class="wet-boew-tabbedinterface"></div>.
- Add <div class="tabs-panel"> to each tab container and include <div id...> for each tab panel. The id for each tab panel must match the href for the associated tab (following the "#" symbol). For example:
<div class="wet-boew-tabbedinterface"> <ul class="tabs"> <li><a href="#tab1">National events</a></li> <li><a href="#tab2">Regional events</a></li> <li><a href="#tab3">Local events</a></li> </ul> <div class="tabs-panel"> <div id="tab1"> <p>tab 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p><a href="#">fake link</a></p> </div> <div id="tab2"> <p >tab 2 - Consectetur adipiscing elit. Praesent sit amet felis.</p> <p><a href="#">fake link</a></p> </div> <div id="tab3"> <p>tab 3 - Praesent sit amet felis. Etiam malesuada.</p> <p><a href="#">fake link</a></p> </div> </div> </div>
-
Optional: Change the default appearance of a tab set by adding one of the following classes to the tab container:
- tabs-style-1: Stylized horizontal tabs design
- tabs-style-2: Horizontal news scroller design
- tabs-style-3: Vertical news scroller design with links on the right
- tabs-style-4: Slideshow design with text-based links below
- tabs-style-5: Slideshow design without text-based links
* '''Optional:''' Specify which tab is selected by adding '''class="default"''' to that tab. For example: <pre> <ul class="tabs"> <li><a href="#tab1">National events</a></li> <li class="default"><a href="#tab2">Regional events</a></li> <li><a href="#tab3">Local events</a></li> </ul>
- Optional: Add class="auto-height-none" to the tab container to disable forcing all tab panels to be the same height:
<div class="wet-boew-tabbedinterface auto-height-none">
- Optional: Add class="cycle-fast", class="cycle" or class="cycle-slow" to the tab container to add a "Play"/"Pause" ("Jouer"/"Pause") button for automatically rotating the tabs. The tabs rotate every 2 seconds for cycle-fast, every 6 seconds for cycle and every 8 seconds for cycle-slow. A different rotation delay can be specified using data-wet-boew="cycle:10000" where the value for cycle is the delay in milliseconds. The tabs will automatically rotate by default unless class="auto-play-none" is added to the tab container.
<div class="wet-boew-tabbedinterface cycle auto-play-none">
- Optional: Add class="animate-fast", class="animate" or class="animate-slow" to the tab container for a fast, medium or slow fade effect when transitioning between tab panels.
<div class="wet-boew-tabbedinterface animate">
- Optional: Implement complex layouts within the tab containers. When creating parent/child grids, you must use row-start and row-end. There are rare times where this may not be desirable. For example with drag and drop widgets, each grid cell must be the same size so the addition of row-start or row-end on some of them may cause layout problems when the box is moved from one column to another. Therefore, you can use the class embedded-grid. This CSS acts as a container for the tabs and you do not need to put them in a grid cell. It also removes the borders so the full with of the space is available.
The tabbed interface is dependent upon EasyTabs.js (MIT license, GPL license), EqualHeights (GPL license) and the jQuery Metadata plugin (MIT license, GPL license).
The code for the tabbed interface is located in several places within the source folder of WET:
- js/workers/tabbedinterface.js - contains the JavaScript code for the tabbed interface
- js/sass/includes/_tabbedinterface.scss - contains the CSS for the tabbed interface
- js/sass/includes/_tabbedinterface-ie7.scss - contains the IE7 specific CSS for the tabbed interface
- js/sass/includes/_tabbedinterface-ie8.scss - contains the IE8 specific CSS for the tabbed interface
- js/images/tabs/ - contains the images for the tabbed interface
- js/dependencies/easytabs.js - script file for EasyTabs.js
- js/dependencies/equalheights.js - script file for EqualHeights
- js/dependencies/easytabs.js - script file for jQuery Metadata
- Content that is hidden by default can be missed by users
- Extra user effort is required to view all the content
- A large page load may initially show all the tab content prior to the feature restyling it.
- Tab headings may have accessibility issues if they are not descriptive enough (e.g., using "1", "2", and "3" for the the news slider). Use the wb-invisible class to make tab headings more descriptive without affecting the appearance. For example:
1<span class="wb-invisible"> Top news today</span> 2<span class="wb-invisible"> Did you know?</span>
- Adding transition effects to the tabs (e.g., elegant fade in/out) creates the risk of a user selecting two tabs in a row before the transition effect for the first tab can complete. In such a situation, the second tab will be selected but the first tab panel will be displayed. Because of this risk, this feature does not demonstrate, nor recommend adjusting the animate setting (currently set to "false").
- Usability testing revealed critical issues with the tabbed interface when used with text. Users expect that when they select text, they will be taken to a new page.