Tabbed presentation (compact content widget)

The compact content widget can be initialised using a tabbed presentation. Visit the compact content widget page for links to a working demonstration and to download the required files.

How to use

There are two basic ways you can use the tabbed presentation.

Both methods require that you include the relevant compact widget scripts and styles first.

  1. Add the class tabbed to the compact container of the basic markup. For example:

    <div class="compact tabbed" id="example-tabbed">

    If using this approach, the widget will be initialised automatically when the DOM is ready.

  2. Alternatively, you can initialise the widget manually by selecting the container element using a jQuery selector then applying the compact() plugin and specifying the type option as ‘tabbed’.

    This initialisation can occur at any time after the HTML for the widget has been parsed.

    	type : 'tabbed'

    Other options for this instance can be passed during initialisation to overide the default values.

That’s it, all done!

Further options and configuration variables are detailed below, but the defaults are pretty good, so if you are looking for a quick installation, then read no further.

If you would like to tweak elements of the presentation, read on…

Initialisation options (unique per instance)

The options detailed below can be passed during the manual initialisation. For example:

	type             : 'tabbed',
	controlsPosition : 'before',
	variableHeight   : true
Tabbed compact content initialisation options
option values description
  • ‘tabbed’
This option is only required if you haven’t added the tabbed class to the compact container element.
  • true
  • false (default)
If set to true, the height of the widget will animate based on content of the currently visible panel. If set to false, the height of the widget will be set to the height of the tallest section. Note: All content images must have a height and width specified in img tag markup for this to work.
  • ‘before’ (default)
  • ‘after’
Controls (tabs) are inserted before or after content panels.
  • ‘slow’
  • ‘def’
  • ‘fast’ (default)
  • integer (ms)
The speed of animated transitions between content panels.
  • ‘slow’
  • ‘def’ (default)
  • ‘fast’
  • integer (ms)
The speed of the animated adjustment of the height of the widget. Height adjustments occur when variableHeight is set to true. Adjustments can also occur when variableHeight is set to false, if the resizeEvents plugin is available and the window or text size changes.
  • true (default)
  • false
If set to true, and the jQuery cookie plugin is available the last focussed tab will be remembered.
  • integer (default 30)
The number of days the cookie will persist before expiring.

Global configuration (applies to all instances)

The configuration variables detailed below can be overridden by updating properties of the $.compact.tabbed object before initialising any tabbed widgets. For example:

$.compact.tabbed.viewportElClass = 'outer-window';
$.compact.tabbed.viewportInnerElClass = 'inner-window';

These variables allow some flexibility in terms of the markup generated when the widget is initialised.

Note: Remember when overriding these variables, some of the default CSS will need to be updated to reflect the changed markup that is generated as a result.

Tabbed compact content global configuration variables
variable default description
containerSelector '.compact.tabbed' jQuery selector that can target the container element (usually by following the DOM upwards from within the widget to the first matching parent element).
activeClass 'active' class applied to container element after widget is initialised (allows independant styling of appearance when script is available and when its not).
cookieRefPrefix 'c.tabbed#' A prefix string that is used to identify cookies for compact content widgets with tabbed presentation.
viewportElClass 'viewport' Class for the outer wrapper element. Wraps all content sections.
viewportInnerElClass 'viewport-inner' Class for the inner wrapper element. Wraps all content sections.
sectionClass 'section' Class to match for each section of content (each section represents a tab panel of content).
headingClass 'heading' Class to add to the heading of each tab panel so that it can be hidden.
contentClass 'content' Class to add to a div element that will wrap the content of each tab panel.
buttonClass 'button' Not currently used as a class. Instead this string is added as a suffix to the ids generated for each control element (tab).
closedClass 'closed' Class to add to sections that are not visible.
openClass 'open' Class to add to the currently visible section.
currentClass 'current' Class to add to the list item wrapping the control element (tab) that activates the currently visible section.

Default generated markup

Below is an example of the before and after markup transition that occurs for each tabbed widget when it is initialised.

Note: If you have customised the configuration variables the generated markup will differ. Also some initialisation options can affect the markup.

Before initialisation:

<div class="compact tabbed" id="example-tabbed">
    <div class="section" id="lorem-ipsum">
        <h2>Lorem ipsum dolor</h2>
        <p>Lorem ipsum dolor sit amet.</p>
    <div class="section" id="in-a-orca">
        <h2>In a orci</h2>
        <p>In a orci. Aenean et mi quis dui semper nonummy.</p>
    <div class="section" id="maecenas">
        <h2>Maecenas mattis</h2>
        <p>Maecenas mattis. In interdum pede in ipsum.</p>

After initialisation (note ARIA roles, states and properties are embedded):

<div class="compact tabbed current-lorem-ipsum active" id="example-tabbed">
    <ul controls="example" tabindex="0" class="nl tabs controlset"
        <li class="current"><a role="wairole:tab" tabindex="-1" pressed="true"
        	href="#lorem-ipsum" id="lorem-ipsum-button"><span>
        	Lorem ipsum dolor</span></a></li>
        <li><a role="wairole:tab" tabindex="-1" pressed="false"
        	href="#in-a-orca" id="in-a-orca-button"><span>
        	In a orci</span></a></li>
        <li><a role="wairole:tab" tabindex="-1" pressed="false"
        	href="#maecenas" id="maecenas-button"><span>
        	Maecenas mattis</span></a></li>
    <div class="viewport"><div class="viewport-inner">
        <div expanded="true" hidden="false"
        	class="section open" id="lorem-ipsum">
            <h2 class="heading">Lorem ipsum dolor</h2>
            <div atomic="true" labelledby="lorem-ipsum-button" 
            	expanded="false" hidden="true" tabindex="0"
                class="content" id="lorem-ipsum-content">
            	<p>Lorem ipsum dolor sit amet,</p>
        <div style="display: none;" expanded="false" hidden="true" 
        	class="section closed" id="in-a-orca">
            <h2 class="heading">In a orci</h2>
            <div atomic="true" labelledby="in-a-orca-button" 
            	expanded="false" hidden="true" tabindex="0"
                class="content" id="in-a-orca-content">
            	<p>In a orci. Aenean et mi quis dui semper nonummy.</p>
        <div style="display: none;" expanded="false" hidden="true"
        	class="section closed" id="maecenas">
            <h2 class="heading">Maecenas mattis</h2>
            <div atomic="true" labelledby="maecenas-button"
            	expanded="false" hidden="true" tabindex="0"
            	class="content" id="maecenas-content">
            	<p>Maecenas mattis. In interdum pede in ipsum.</p>

The markup generated by the tabbed presentation type can be styled using the technique outlined in the A List Apart article Sliding Doors of CSS II.

Posted in

Leave a reply