Protoplasm

4.0

Rating: 4.0/5 (19 votes)

Tab Strip

A simple tab strip control. Click the tabs to change the frame content. If the number of tabs exceeds the available width of the control, scrolling arrows will appear on the right to show offscreen tabs.

Note: does not currently work in IE 7 or lower due to lack of inline-block support. Final version will support IE 7+.

Demo

General
Preferences
Account

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec lorem eu dui semper commodo. Quisque quam risus, varius sed adipiscing a, laoreet a magna. Fusce magna urna, viverra a faucibus eu, fringilla vitae elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin accumsan leo eu orci fringilla tristique. Aliquam erat volutpat. Donec interdum lacinia felis quis scelerisque.

Proin ut velit sapien. Suspendisse potenti. Praesent eget congue leo. Suspendisse vel tortor eget diam viverra mattis. Nunc nec nulla id nunc pharetra tincidunt nec ac felis. Curabitur sollicitudin bibendum erat, ut auctor nulla fermentum non. Nunc eget neque diam, sed malesuada turpis. Morbi libero ante, rhoncus in egestas a, pharetra a velit. Donec congue dui at nunc rutrum eu tempor purus pharetra. Quisque egestas dolor sed eros pulvinar id consectetur diam semper.

Preferences content

Account content

Source Example

<html> <head> <script language="javascript" src="protoplasm.js"></script> <script language="javascript"> Protoplasm.use('tabstrip').transform('div.tabstrip'); </script> </head> <body> <div class="tabstrip"> <ul> <li>Tab 1</li> <li>Tab 2</li> </ul> <div> <div>Content 1</div> <div>Content 2</div> </div> </div> </body> </html>

Usage

To create tab strips out of all elements that match a given CSS rule:

Protoplasm.use('tabstrip').transform(selector[, options]);

Parameters:

Parameter

Required

Description

selector

yes

A CSS rule matching the text inputs to turn into tab strips.

options

An object (hash) containing name/value pairs of additional options.

Available options:

activeClass	The CSS class assigned to a tab when it is active
disabledClass	The CSS class assigned to a tab when it is disabled
onClick	A callback function that is called when a tab is clicked. The parameter is the tab element.
disabled	A list of tab ID's to disable initially

Tab Strip transforms existing HTML content, so you are responsible for creating the HTML elements yourself. The HTML structure should be similar to the following:

<div class="tabstrip">
    <ul>
        <li>Tab 1</li>
        <li>Tab 2</li>
    </ul>
    <div>
        <div>Content 1</div>
        <div>Content 2</div>
    </div>
</div>

Advanced Usage

If you want more control over creation and destruction of the tab strip, you can instantiate it manually instead of using Protoplasm.transform.

In your <head> section:

Protoplasm.use('tabstrip');

To create a tab strip:

var tabs = new Control.TabStrip(element[, options]);

To destroy the tab strip:

tabs.destroy();