MultiTabs

From Jsorm

Overview

MultiTabs is a dynamic tab manager. It allows you to create several sections of content, each inside its own div, then provide unordered list entries as their headers, a.k.a. tabs. All of the content is kept hidden, except the currently selected one. When one of the headers is clicked upon by the user, all of the other sections are hidden, and the selected one is shown. MultiTabs leverages and relies upon MooTools to provides it functionality.

MultiTabs is called "Multi" tabs because it has multiple methods to show/hide the content.

• Basic: In Basic method, the hidden content fades out, while the shown content appears.
• Sliding: In Sliding method, the content is all arranged horizontally, in order from left to right. When a tab is selected, the content section slides either to the left or the right, until the appropriate content is displayed.

You do not need to understand how to use or program in MooTools to use MultiTabs.

Release information is available.

• multi-tabs release notes
• multi-tabs roadmap

When To Use It

You should use MultiTabs if you have multiple sections of content, each with its own header, and want only one to be displayed at a time. You could provide this functionality by having each be its own HTML page, but want a more dynamic interaction.

You should not use MultiTabs if:

• You do not and will not use JavaScript in your pages
• Going back to the server and redrawing the page for each content change is fine with you
• You do not have multiple sections you wish to display, one at a time

That having been said, we recommend you read this wiki and try MultiTools even if you think you have no need. You may discover better ways to display your content, and you may come up with recommendations for how we can help you.

Installation

Installing MultiTabs is fairly straightforward. You need only include the MooTools prerequisites and MultiTabs itself a grand total of 2 files, or 3 if you keep mootools Core and mootools More separate. For a simple example, see the MultiTabs sample page.

Prerequisites

You must already have MooTools version 1.2 or later installed and included on your page. You need to include the base mootools as well as the following "More" extensions to mootools:

• Fx.Scroll
• Fx.Slide

These must be included in your page before including MultiTabs itself. For example:

<script type="text/javascript" src="/path/to/mootools/mootools-1.2.js"></script>
<script type="text/javascript" src="/path/to/mootools/mootools-1.2-more.js"></script>

MultiTabs

Include the MultiTabs library in your page with the following code. Be sure this code follows inclusion of MooTools above.

<script type="text/javascript" src="/multi-tabs.js"></script>

Usage

Using MultiTabs involves two steps. In the first, you create the content. In the second, you attach the tab behaviour to the content.

Creating Content

To create content to be managed by MultiTabs, you need to create both the content itself and the tabs. All of the content should be contained within one div, which in itself contains another div, which in itself contains as many divs as necessary to contain each section of content. The outer wrapping div must have a unique id attribute.

For example, if you wish to have three sections of content, the following is included:

<div id="content-wrapper">
  <div>
      <div>First content is here</div>
      <div>Second content is here</div>
      <div>Third content is here</div>
  </div>
</div>

Creating Tabs

To match the sections of content, you need a matching number of "tabs", i.e. sections of text that, when clicked upon, will show only the relevant section of content. These tabs are list entries in an ordered list. The ordered list may or may not be included in a div, as you wish. However, the unordered list must have a unique id attribute.

Continuing the example above, the following is included:

<div id="tab-wrapper"> <!-- NOTE: This div wrapper is not needed -->
  <ul id="content-tabs">
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
  </ul>
</div>

The tabs section listed above should appear in your page wherever you want the tabs. Thus, if you prefer the tabs before the content, include the tabs unordered list element before the content div; if you prefer the tabs after the content, include the tabs unordered list element after the content div. If you are comfortable using CSS positioning, you can move them around as you wish.

NOTE: MultiTabs does not apply any special formatting to the list. If you wish to have them appear as buttons, horizontally vs. vertically, with a background, border, or any other styling, you are responsible for doing so. For a good example, see the main menu on this site.

The entire content of our example above, including the tabs before the content (a classic structure), would be as follows:

<div id="tab-wrapper">
  <ul id="content-tabs">
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
  </ul>
</div>
<div id="content-wrapper">
  <div>
      <div>First content is here</div>
      <div>Second content is here</div>
      <div>Third content is here</div>
  </div>
</div>

Applying MultiTabs

To apply the MultiTabs structure to the content, you need to include a JavaScript entry that applies it. The entry should come after the inclusion of the MultiTabs JavaScript library. It appears as follows:

<script type="text/javascript">
	window.addEvent('domready',function() {
		basicTabs = new BasicTabs(buttonUlId,contentDivId,options);	// for Basic fade in/out tabs
		slidingTabs = new SlidingTabs(buttonUlId,contentDivId,options);	// for sliding tabs
	});
</script>

The choices for the function call are:

• BasicTabs: Content fades in/out when a tab is clicked
• SlidingTabs: Content is all arranged horizontally from left to right, and slides to the correct position when a tab is clicked

The parameters to the function call are as follows:

1. buttonUlId: The id attribute of the unordered list element
   that contains the tabs
2. contentDivId: The id attribute of the outer wrapper div that contains the content
3. options: options for controlling how MultiTabs manages the content, detailed below

Continuing the example from above, the entry would be:

<script type="text/javascript">
	window.addEvent('domready',function() {
		basicTabs = new BasicTabs('content-tabs','content-wrapper',{});	// for Basic fade in/out tabs
		slidingTabs = new SlidingTabs('content-tabs','content-wrapper',{});	// for sliding tabs
	});
</script>

Nesting Tabs

MultiTabs has the unique ability to nest tabs within tabs. Thus, if you want an entire section to fade in/out, within which each content section has a series of sub-tabs which slide the content section, you can do so. All you need to do is nest the html within the appropriate divs, and apply some tabs to the inner sections, and some to the outer. The sample page has a functioning example of MultiTabs functioning nested.

Options

Several options exist that control the behaviour of MultiTabs. These options are set at creation time, i.e. when you use the function call to apply the tab management functionality to the content.

Common

The following options exist for all tab types:

• startingTab: which tab should be shown initially and have an active tab. May be one of an element, an ID or an index. Defaults to false, i.e. no tab.
• activeButtonClass: CSS class which is applied to the tab that is selected. Defaults to 'active'.
• activationEvent: which event on the tab should cause that tab to become active and its content to appear. Any valid event from Mouse events, without the 'on' prefix. Defaults to 'click'.
• duration: how long the fade in/out, slide left/right, or other such animation should take, in milliseconds. Defaults to 400.
• animateHeight: whether the content wrapping container, i.e. the outer wrapper, should adjust its height to exactly fit the currently visible content section. If true, the page will be the minimum necessary height, but may cause the page to move to the top on some browsers, and can upset the positioning of a footer. Defaults to true.
• wrap: whether going to the next tab after the last tab wraps around to the first tab, and similarly for the previous tab from the first tab. This only affects JavaScript functions to switch tabs.

BasicTabs

The following options exist for BasicTabs:

• effect: which effect to use to make content disappear/appear when selected. Defaults to 'none', which is equivalent to fade in/out.

SlidingTabs

The following options exist for DefaultTabs:

• rightOversized: how much of the next pane to show to the right of the current pane. Defaults to 0.

Application Programming Interface (API)

In addition to use interaction, e.g. mouse click, the currently selected tab can be changed programmatically via JavaScript on the page. To do so, you must:

1. Keep a reference to the object created by the "new BasicTabs" or "new SlidingTabs" call
2. Call API functions on that object

The following API functions are available:

• next: go to the next tab. If on the last tab, the option 'wrap', which was set at creation time, determines whether this function wraps to the first tab, or has no effect.
• previous: go to the previous tab. If on the first tab, the option 'wrap', which was set at creation time, determines whether this function wraps to the last tab, or has no effect.
• changeTo: go to a pre-defined tab. The argument is the target tab. The target may be one of: an index; an element unique identifier; a reference to an element.

Using the above example, you can go to the next tab of the basic tabs created with:

basicTabs.next();

You can go to the previous tab with:

basicTabs.previous();

You can go to the second tab (index 1 in a 0-base counting) with:

basicTabs.changeTo(1);