The Tabs class

Ojay.Tabs is a class designed to allow you to easily create tabbed interfaces, compressing larger blocks of related content into a smaller area. It provides event notification for tab switching events, and allows tabbed areas to be back-button compatible using Ojay.History.

Required files

  • http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js
  • http://yui.yahooapis.com/2.7.0/build/selector/selector-beta.js
  • http://yui.yahooapis.com/2.7.0/build/animation/animation.js
  • http://yoursite.com/ojay/js-class.js
  • http://yoursite.com/ojay/core.js
  • http://yoursite.com/ojay/pkg/tabs.js

To use Ojay.AjaxTabs:

  • http://yui.yahooapis.com/2.7.0/build/connection/connection.js
  • http://yoursite.com/ojay/pkg/http.js

To manage history and allow tabs to be bookmarked:

  • http://yui.yahooapis.com/2.7.0/build/history/history.js
  • http://yoursite.com/ojay/pkg/history.js

Examples

Creating a group of Tabs

New tab groups require a specific markup structure: a set of sibling elements, each of which must contain an element whose content will be used as the content of the corresponding toggle. Semantically, headers will usually be a good match. By default the Ojay.Tabs constructor will look for elements with a class of toggle, as in the example below:

    <div class="tab-group">
        <div class="tab">
              <h3 class="toggle">First</h3>
              <!-- content goes here -->
        </div>

        <div class="tab">
              <h3 class="toggle">Second</h3>
              <!-- content goes here -->
        </div>

        <div class="tab">
            <h3 class="toggle">Third</h3>
            <!-- content goes here -->
        </div>
    </div>

Given that markup structure, we can set things in motion by creating a new Ojay.Tabs object and calling its setup() method.

    var tabs = new Ojay.Tabs('.tab-group .tab');
    tabs.setup();

This will add the toggles above the tabs, and apply various classes and layout properties to the tab group. You can add the tabs below the tab group, rather than above it, by passing in a togglesPosition option:

    var tabs = new Ojay.Tabs('.tab-group .tab', {
        togglesPosition: 'after'
    });
    tabs.setup();

Here are the options currently supported:

  • switchTime: the duration of the transition between one tab and another. Defaults to 0.2 seconds. Note that this is half the total time for the transition, which consists of both the time for the current tab to fade out plus the time for the new tab to fade in, so under the default settings the entire transition will take 0.4 seconds.
  • togglesClass: the class applied to the toggles generated when the Tabs object is created. Defaults to toggles.
  • toggleSelector: the CSS selector string used to find the elements whose contents will be used in the toggles. Defaults to ".toggle".
  • togglesPosition: controls where the toggles will be inserted, relative to the parent of the elements picked out by the selector passed in as the first argument to the Tabs constructor. Any string accepted by the insert function will work; see the Generating HTML article for more.

If you want the tab group to be history-managed, add a call to Ojay.History before the setup() call:

    var tabs = new Ojay.Tabs('.tab-group .tab');
    Ojay.History.manage(tabs, 'myTabGroup');
    // Register other objects and initialize History
    tabs.setup();

Remember to call Ojay.History.initialize() when appropriate, and to register all applicable objects beforehand. Do not call setup() on these objects until you’ve initialized the history manager, or else they will not start up correctly. See Ojay.History for more information.

API methods and events

The only current API method that Tabs instance have is tabs.setPage(n). This switches to the tab with the index n, e.g. tabs.setPage(1) will switch to the first tab.

Tabs instances publish a pagechange event each time they switch to a new tab. To listen for them, just add a new event handler in the usual manner:

    tabs.on('pagechange', callback, scope);

Here callback is the function you wish to be executed when the event is published, and scope specifies its execution context. For example, to alert the user when they switch to a different tab, you could use the following code:

    tabs.on('pagechange', function(tabGroup, index) {
        alert('You are now viewing tab number ' + index);
    });

If you want to switch to a new tab but don’t want to alert listeners that the event has occurred, you can pass in the silent option:

    tabs.setPage(1, {silent: true});

Ajax tabs

The class Ojay.AjaxTabs, a child of Ojay.Tabs, allows a set of tabs to be generated from a set of HTML link elements; the content of each tab will be the contents of the pages referenced by the links. Say we start with the following markup:

    <ul id="authors">
        <li><a href="/first.html">First</a></li>
        <li><a href="/second.html">Second</a></li>
        <li><a href="/third.html">Third</a></li>
    </ul>
    <div id="tabView"></div>

We can create a set of tabs by supplying selectors (or element references) for the links and the element in which to display the tab content:

    var tabs = Ojay.AjaxTabs.fromLinks('#authors a', '#tabView');
    tabs.setup();

The class method Ojay.AjaxTabs.fromLinks takes an optional third argument, which allows you to specify options as described above for the base Ojay.Tabs class. The Ojay.AjaxTabs has the same API as its parent class and can be history managed, and it also publishes two additional events:

  • pagerequest – fired when a request for content is made to the server. Passes the requested URL as the second callback argument.
  • pageload – fires when an Ajax request completes successfully. Passes the requested URL and the HTTP.Response object in case, say, you have script in the response that you want to execute.

The content for each tab is loaded if and when the corresponding link is clicked, so you can lazy-load content. If the tab contents contain scripts you need to run, you can handle this as follows:

    tabs.on('pageload', function(tabs, url, response) {
        response.evalScripts();
    });

See the ajax tabs example for more ideas.