A Prototype.js class to make tabbed navigation with history management simple.

News

Beta 1 - This initial release includes an unobtrusive tab navigation scheme with history management. Fails gracefully for browsers without JavaScript, or when it is disabled.

See it in action

Here is a quick sample of using the HistoryTabs class. Click on a tab, and the content is loaded. Now click on the browser's navigation buttons - both the back button and forward button should work:

HistoryTabs Beta 1 demo

How it works

Pretty simple. We need to include Prototype version 1.6 or greater, the historyTabs.js file (or use the supplied historyTabs-min.js file that is minimized using the yui compressor), and tabs.css file that provides the necessary styling:

<script type="text/javascript" src="/js/prototype-min.js"></script>
<script type="text/javascript" src="historyTabs.js"></script>


Now, create the HTML required for the tabs. The tabs are a simple un-ordered list element, with each list element being a single tab. The link for the tab will automatically be ajaxed for you, passing any url parameters using the post method. Here is an example of what your HTML should look like:

<div id="tabs">
  <ul>
    <li id="tab1" class="current"><a href="ajax/ajaxcalls.cfm?action=getContent1"><span>Tab 1</span></a></li>
    <li id="tab2"><a href="ajax/ajaxcalls.cfm?action=getContent2"><span>Tab 2</span></a></li>
    <li id="tab3"><a href="ajax/ajaxcalls.cfm?action=getContent3"><span>Tab 3</span></a></li>
    <li id="tab4"><a href="ajax/ajaxcalls.cfm?action=getContent4"><span>Tab 4</span></a></li>
    <li id="tab5"><a href="ajax/ajaxcalls.cfm?action=getContent5"><span>Tab 5</span></a></li>
    <li id="tab6"><a href="ajax/ajaxcalls.cfm?action=getContent6"><span>Tab 6</span></a></li>
  </ul>
</div>


Next, you need to instatiate the HistoryTabs class with the first argument containing the id value for the container element. In this case, my container element is a div, with an id of 'tabs'. The second argument is a hash of available options. Below is the example that creates the demo tabs on this page, along with the HTMML above.

<script type="text/javascript"
  historyTabs = new HistoryTabs('tabs');
</script>

Thats it! All links are automatically ajaxed into the tab content element (div#tabcontent in the example). If you do not want a link to be ajaxed in, just put rel="ignorelink" into your <a> tag. You can also use the ignorelinks option to specify an array of element id's whose child anchor tags should be ignored.

Here is a listing of all the currently available options you can specify:

<script type="text/javascript"
  myHistoryTabs = new HistoryTabs('tabs',{
    ajaxurl: this.rooturl+'ajax/'          //the path to prefix all ajax calls with
    loadingindicator: 'loadingindicator',  //the id of the loading indicator whose display property will be toggled
    tabcontainer: 'tabcontainer',          //the id of the container element that has both the tabs and tab content elements within
    tabcontentdiv: 'tabcontent',           //the id of the element where all content will be injected
    ignorelinks: ['ignorechildlinks'],     //array of classes whose parent's a tags will be ignored
    iehistoryframe: 'IE_history',          //optional id of the iframe element used to store history management in IE
    tabidprefix: 'tab',                    //the prefix of the id attribute for each li element
    toggleTabImages: false                 //whether or not to toggle images within the tabs (not yet supported)
  });
</script>

Download

Go ahead and grab the files you need to get started: