Tab Strip
A simple tab strip control. Click the tabs to change the frame content.
Demo
Download
Tab Strip is available under the terms of the GNU General Public License.
Source:
Global dependencies for all controls:
- Prototype - an excellent Javascript object library
- prototype-base-extensions.js - extensions to the Prototype library
Usage
Unlike most of the others, this control works by transforming existing HTML content, so you are responsible to creating the HTML elements yourself and passing the parent ID to the constructor. The HTML structure should be similar to the following:
<div id="my_tabstrip">
<div>
<span>Tab 1</span>
<span>Tab 2</span>
</div>
<div>
<div>Content 1</div>
<div>Content 2</div>
</div>
</div>
This gives you better control over the display of the tabs and content through CSS. View the source of the example at the top of the page to see how the tab styling was accomplished through tabstrip.css.
Constructor:
var tabstrip = new Control.TabStrip(element, options);
Parameters:
- element - The CSS id of the <input> element
- options - an object with name/value pairs of additional options
Additional Options:
- activeClass - the CSS class assigned to a tab when it is active
- hoverClass - the CSS class assigned to a tab when the mouse is over it
- disabledClass - the CSS class assigned to a tab when it is disabled
- disabled - a list of tab ID's to disable initially
- Other options currently undocumented
Example:
new Control.TabStrip('my_tabstrip', {
activeClass: 'active',
hoverClass: 'hover',
disabledClass: 'disabled',
disabled: ['preferences', 'account']
});