Tabs

As there is already a feature rich tabs widget by jQuery UI, my widget extends the original one. The widget supports all features of the original application. Powerful, accessible tabs — made easy!

---

Please Note

There are two versions of my tabs widget:

1. “Addon” Version: last version was for jQuery 1.4.4 / UI 1.8.7, see here (This is version is not under active development)
2. Standalone Version: current version is for jQuery 1.4.4 / UI 1.8.11, see here

There is another standalone implementation from Hans Hillen (see @hanshillen).

---

News

• Tabs “addon” is not maintained anymore, please see https://github.com/fnagel/jquery-ui/tree/tabs-accessibility instead
• Please see this issue for a new integrated version of the add-on (jQuery UI team plans to implement my features to the original widget).
• I blogged about browser history support via jQuery Address (English language).
• I blogged about jQuery UI Tabs made accessible (German language).

Demo

THIS DOCUMENTATION IS RELATED TO THE “ADDON” VERSION

Information
As the sortable tabs functionality is provided by the jQuery UI sortable Widget (which is not accessible and not really a part of the tabs widget), this functionality was not extended and no demo is provided.

PLEASE NOTE: Demos are no longer provided as this addon is outdated.

• Default functionality demo
• AJAX functionality demo
• Collapsible functionality demo
• Mouse-over functionality demo
• Rotate functionality demo
• Default with browser history support

Real-Life examples

• FelixNagel.com

Contact me to add your project here.

Functionality features

• supports all original features (like rotating or collapsible tabs and AJAX)
• supports all original widget methods (like renaming, adding or deleting a tab)

File size of the minified version is less than 5 KB + original widget (about 11 KB).

Accessibility features

• full browser history and title support via jQuerry Address
• keyboard support (arrow keys, Home, End)
• ARIA Live-Regions
• ARIA relations and role tab attribute

Documentation

Just add the script file after original widget js file or copy content into one file.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.tabs.js"></script>
<script type="text/javascript" src="js/ui.ariaTabs_min.js"></script>

Options

There are no more options or methods except for jQuery Address

Option	Type	Description
jqAddress.enable	boolean	enable browser history support
jqAddress.title.enable	boolean	enable title change
jqAddress.title.split	string	set delimiter string

You need to add the add the jQuery Address file, if you like to use browser history support. jQuery Address support is currently only available in master branch (jQuery 1.4, UI 1.8).

This text is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported Licence.
*