type: widget

release: 1.5

priority: -

status: complete

documentation: http://docs.jquery.com/UI/Tabs

demo: http://jqueryui.com/demos/tabs

 

 

---

 

1 - Description:

 

A tab strip is used to chunk sections of content into multiple panes that can be shown one at a time, much like the sections in a notebook. Depending on the size of the window and length of tab labels, you can create a tab view that contains between two and six to eight tabs. This rule of thumb is followed because tab strips should never wrap to multiple rows or insert horizontal scrollers for the tabs because of the poor visual connection between the tab and the pane below (yes, these have been seen in the past, but is not a good thing). If there are too many items to fit in a tab strip, consider re-grouping the tab content into fewer tabs or moving to a different navigation widget like a vertical left navigation bar or tree which can accomodate a larger number of items.

 

There is a current tab widget in the UI library that needs to be extended to allow for vertical tabs (left or right orientation):

http://docs.jquery.com/UI/Tabs

http://jqueryui.com/demos/tabs

 

Detailed tab behavior descriptions can be found for Apple OS X and Microsoft Windows.

 

---

 

2 - Visual Design:

 

 

---

 

 

3 - Functional Specifications/Requirements:

 

Options/Methods/Callbacks

• options:
• selected (integer, default: 0)
• Zero-based index of the tab to be selected on initialization. To set all tabs to unselected set this option to -1 (null is deprecated).
• deselectable (boolean, default: false)
• When set to true, clicking a selected tab will unselect it.
• event (string, default: "click")
• Name of the event that is used for selecting a tab. To select on hover, use "mouseover".
• disabled (array, default: [])
• Array of zero-based tab indices that will be disabled on initialization. Disabled tabs cannot be selected by the selection event.
• cookie (object, default: null (no cookie used))
• Save the currently selected tab in a cookie. This value is then being used to determine the initially selected tab if the selected option is not defined. Requires the jQuery cookie plugin.
• The options in this object are passed through to the jQuery.cookie method.
• Additional option: name (string, default: UUID generated from jQuery.data method) (the cookie's name)
• spinner (string, default: "Loading…")
• While remote content is loading, this HTML content will be displayed in the tab title area. To disable the feature, set to an empty string.
• cache (boolean, default: false)
• By default, tabs that load remote content will re-request the content each time the tab is re-selected. Set this option to true to have the remote content requested only the first time and cached for subsequent selections.
• ajaxOptions (object, default: {})
• The options in this object are passed through to the jQuery.ajax method on remote content loads.
• idPrefix (string, default: "ui-tabs-")
• For generation of ids for newly added tab panels.
• fx (object or array of 2 objects, default: (no effects used))
• The options in this object/these objects are passed through to the jQuery.animate method.
• If objects are given in array, the first object defines the hide, the second one the show animation being used.
• tabTemplate (string, default: "<li><a href="#{href}"><span>#{label}</span></a></li>")
• Template to create a new a tab label form. The placeholders #{href} and #{label} are

  are replaced with their values passed to the add method.

• panelTemplate (string, default: "<div></div>")
• Template to create a new tab content panel from.
• methods:
• select
• load
• add
• remove
• enable
• disable
• url
• destroy
• length
• rotate
• callbacks:
• select (event: tabsselect (custom))
• load (event: tabsload (custom))
• show (event: tabsshow (custom))
• add (event: tabsadd (custom))
• remove (event: tabsremove (custom))
• enable (event: tabsenable (custom))
• disable (event: tabsdisable (custom))
• 'ui' object:
• tab [DOM HTMLAnchorElement]
• panel [DOM HTMLDivElement]
• index [integer]

 

Specificiations

• Indices are generally zero-based.
• select callback: triggers when a tab is selected by event as defined in event option or programmatically via select method. If this function returns false, the requested tab won't become selected.
• load callback: triggers when an ajax tab successfully has loaded content, either explicitly via load method or implicitly by selecting a tab.
• show callback: triggers when the selected tab is shown. In case of animation being defined for showing this means after the animation is complete.
• The aforementioned callbacks are thus triggered in the following order: 1. select, 2. load (ajax tab only), 3. show.
• add callback: triggers when a new tab has been added via add method.
• remove callback: triggers when a tab has been removed via remove method.
• enable callback: triggers when a tab has been enabled via enable method.
• disable callback: triggers when a tab has been disabled via disable method.
• There are 4 possibilities to set the initially selected tab:
• selected option (highest priority)
• url fragment identifier matching a tab href's fragment identifier: href="#fragment-identifier",
• from cookie,
• the according class attribute is already specified in HTML source: <li class="ui-tabs-selected"> (lowest priority)

A possibly arising conflict is resolved by giving each alternative a different priority, as denoted.

• It is possible to initialize an empty tab set and add tabs later on. 

• A selected tab cannot be deselected by selecting it a second time unless option deselectable is set to true. 

• A selected tab cannot be disabled.

• If the selected tab is being removed the one to the right is selected as long as it is not the last one at the same time - in this case the one to the left is selected (mimicing behavior in Firefox).

• The type of tab (in-page vs. ajax) is determined automatically from the href attribute of the contained anchor elements - an href being solely a fragment-identfier href="#fragment-identifier" results in an in-page tab, an href pointing to an existing resource href="/path/to/resource.html" results in an ajax tab. External URIs are not supported due to security restrictions with ajax.

 

Css Classes

The following markup is used in tab implementation with added classes in bold (note this is the rendered source):

 

     Sample Markup

 

     <div style="display: block;" id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">

 

     <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">

     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">a href="#tabs-1">First</a></li>

     <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Second</a></li>

     <li class="ui-state-default ui-corner-top"><a href="#tabs-3">Third</a></li>

     </ul>

 

     <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">Tabs 1 Panel Content</div>

     <div id="tabs-2" class="ui-tabs-hide ui-tabs-panel ui-widget-content ui-corner-bottom">Tabs 2 Panel Content</div>

     <div id="tabs-3" class="ui-tabs-hide ui-tabs-panel ui-widget-content ui-corner-bottom">Tabs 3 Panel Content</div>

 

     </div>

 

     List of Classes - and Explaination:

 

     In the Container Div:

     ui-tabs -

     ui-widget -

     ui-widget-content -

     ui-corner-all -

 

     In the Unordered List that makes up your Tabs:

     ui-tabs-nav -

     ui-helper-reset -

     ui-helper-clearfix-

     ui-widget-header-

     ui-corner-all

 

      In the List tags themselves (these are your actual tabs):

     ui-state-default - 

     ui-corner-top -

     ui-tabs-selected -

     ui-state-active -

 

     In Panels that contain your content:

     ui-tabs-hide -

     ui-tabs-panel -

     ui-widget-content -

     ui-corner-bottom -

 

 

Changes from 1.5, 1.6rc5 in refactor

• setting all tabs to unselected via value -1 instead of null (deprecated)

---

 

4 - Markup & Style:

 

4.1 Initial markup examples

 

     (Pre-enhanced HTML markup structure that will be transformed into the final widget. There may be multiple possible HTML markup options per widget: for example, for a slider, radiobuttons, inputs or selects could all be used. )

 

4.2 Recommended transformed HTML markup demo with html and css (live view of git):

 

View Demo Page: http://view.jqueryui.com/master/tests/static/tabs/tabs.html

 

 

 

 

     (The HTML markup structure and classes that will be used by the scripts in the enhanced version) 

 

4.3 Markup & style browser QA status

 

As of 12/12/08, static markup for this widget renders correctly in the following browsers.  (Correct rendering = true to design, with only small differences across browsers owing to differences in support of rounded corners, and native OS form element and font rendering.)

 

Please update this list as more browsers / platforms are tested.

 

	XP	Vista	Mac 10.5
IE 6
IE 7
IE 8
Firefox 2.0.0.18
Firefox 3.0.4
Safari 3.2
Opera 9.1
Opera 9.62
Chrome 3

 

 

 

 

 

 

 

 

 

 

 

 

 

    

 

 

 

 

 

 

4.4 Accessibility recommendations 

 

Required ARIA Markup:

• role="tablist" for the outer container element
• role="tab" for each tab element
• role="tabpanel" on each tab panel element
• aria-selected="true/false" for each tab, depending on whether the tab is currently the active one in the tablist
• aria-expanded="true/false" for each tab panel, depending on whether the corresponding tab is currently expanded. This is specifically important for tabs that allow each tab to be collapsed.
• aria-controls="<ID>" on each tab, references the ID of the tab's corresponding panel element
• aria-labelledby="<ID>" on each tab panel, references the ID of the panel's corresponding tab element (in other words, the tab provides the accessible name for the panel)
• aria-live="polite" on tab panels that load remote content
• aria-busy="true/false" on tab panels with remote contents. The value will be "true" while the panel contents are loading, indicating to assistive technology that the content is not available yet. 

 

Keyboard Accessibility:

 

To comply with the DHTML Styleguide, the following keystrokes need to be supported:

• For tab elements:
• Left / Up arrow: Select and focus previous tab (if first tab has been reached, wrap to the last)
• Right / Down Arrow: Select and focus next tab (if last tab has been reached, wrap to the first)
• Ctrl + arrow keys: Change focus to the next / previous tab without selecting it. This is useful to allow (screen reader) users to explore the available tabs without triggering remote content (as this could have a high performance in bandwidth and delay). The Space /Enter key can then be used on the focused, unselected tab to select and expand it. 
• Home: Select and focus first tab
• End: Select and focus last tab
• Enter / Space: Toggle the tab's expanded state (for tabs that allow each tab to be collapsed)
• alt + del: Delete the currently selected tab (for tabs that allow this)
• Inside Tab Panel:
• Alt + Del: Delete the currently selected tab (for tabs that allow this)
• Ctrl + PageUp: Select, expand and focus the tab associated with the previous tab panel (or wrap to the last)
• Ctrl + PageDown: Select, expand and focus the tab associated with the next tab panel (or wrap to the first)
• Ctrl + Up Arrow: Focus tab coresponding to the currently opened panel

 

A choice needs to be made between two types of keyboard interaction:

1. Each tab is part of the web page's tab order, the Enter key is used to activate a tab (the way the JQuery tabs worked originally)
2. Only the selected tab is part of the tab order, the arrow keys are used to change the selected tab (as recommended in the key strokes section above)

There has already been some discussion about the ideal keyboard model for tabs, which describes the benefits and disadvantages of both options. Ideally this discussion should be reopened to reach concensus. 

 

Potential issues:

1. When a tab receives focus this needs to be indicated visually
2. The selected tab needs to be indicated in a way that does not depend on color alone and remains visible in high contrast mode

 

Felix Nagel has created a plugin (ui.ariaTabs) that applies many of the recommendations above, and this should be used as a start for implementing accessibility changes to jquery.ui.tabs.

 

4.5 CSS & Theme

 

(Description of the CSS classes to be used for all states, how custom theming and Themeroller support will work.) 

 

---

 

5 - Latest version of plugin:

 

http://code.google.com/p/jquery-ui/source/browse/tags/latest/ui/ui.tabs.js

 

---

 

6 - Open issues being discussed

 

(Use this area to place things that we're hashing out like featuresand options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)

 

 

• Support same markup as Accordion: http://forum.jquery.com/topic/new-markup-structure-for-tabs

 

---