glowTabSet jQuery Plugin

jQuery.fn.glowTabSet

Renders and manages a set of selectable tabs

Usage

$('SELECTOR').glowTabSet(options)

where 'SELECTOR' contains div element(s) which will be used as tab container and the options object can contain:

Options

cssClass: string class name applied to the containing div
- default: empty string
tabCssClasses: array of string classes to apply to tabs. The first class is applied to the rendered link for the tab. Any subsequent classes are transformed into nested div elements within the tab with the class names applied, one-per-class.
- default: []
tabSelectedCssClasses: array of string classes to apply to selected tabs. The first class is applied to the rendered link for the tab. Any subsequent classes are transformed into nested div elements within the tab with the class names applied, one-per-class.
- default: []
tabHoverCssClasses: array of string classes to apply to hovered tabs. The first class is applied to the rendered link for the tab. Any subsequent classes are transformed into nested div elements within the tab with the class names applied, one-per-class.
- default: []
enableResizing: boolean value of whether to allow resizing of the tab set
- default: true
tabs: declarative array of tab items. Each tab item is, itself, an array of the following format:
- [0]: tab id string
- [1]: tab displaly text
- [2]: tab URL (or null)
- [3]: callback function when clicked
- [4]: specific string class name applied to this tab

Events

glowTabSetResize - triggered when modifications of the tab set result in a resize

Methods

add

Adds a new tab item to the tab set

var tab = $('SELECTOR').glowTabSet('createTab', {id:'id',text:'text'});
$('SELECTOR').glowTabSet('add', tab);

remove

Removes a tab item from the tab set

$('SELECTOR').glowTabSet('remove', tab);

clear

Removes all tab items from the tab set

$('SELECTOR').glowTabSet('clear');

insert

Adds a new tab item to the tab set at a specific index

var tab = $('SELECTOR').glowTabSet('createTab', {id:'id',text:'text'});
var index = 3;
$('SELECTOR').glowTabSet('add', tab, index);

getById

Retrieves an existing tab by its id

var tab = $('SELECTOR').glowTabSet('getById', 'tabId');

getByText

Retrieves an existing tab by its display text

var tab = $('SELECTOR').glowTabSet('getByText', 'text');

getByIndex

Retrieves an existing tab by its indexed position

var tab = $('SELECTOR').glowTabSet('getByIndex', 3);

count

Returns the count of available tabs

var count = $('SELECTOR').glowTabSet('count');

selected

Gets and/or sets the currently selected tab item (or null if not selected.)

var currentlySelectedTab = $('SELECTOR').glowTabSet('selected');
$('SELECTOR').glowTabSet('selected', tabToSelect);

createTab

Creates a new tab item suitable for adding/inserting into the tab set

var tab = $('SELECTOR').glowTabSet('createTab', {
    id:'id',
    text:'text',
    url:'url',
    onClick:function(){},
    cssClass:'perTabClass'});

Recommended