glowTabbedPanes jQuery Plugin

Ben Tiedt — Fri, 08 Mar 2024 17:51:48 GMT

Current Revision posted to API Documentation by Ben Tiedt on 03/08/2024 17:51:48

jQuery.fn.glowTabbedPanes

Renders and manages a set of selectable tab panes

Usage

$('SELECTOR').glowTabbedPanes(options)

where 'SELECTOR' contains a div element whose child child div elements are rendered as tab pane contents

Options

cssClass: string class name applied to the div wrapping the tab panes
- default: empty string
tabSetCssClass: string class name applied to the div wrapping the tabs
- 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 is matched by array index position to a child div of the selector as that tab's content. Each tab item is, itself, an array of the following format:
- [0]: tab id string
- [1]: tab displaly text
- [2]: callback function when clicked
- [3]: boolean value of whether tab is disabled
- [4]: specific string class name applied to this tab

Events

glowTabbedPanesResize - triggered when modifications of the tabbed panes result in a resize

Methods

add

Adds a new pane to the tabbed panes

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

remove

Removes a pane from the tabbed panes. Optional second boolean parameter declares whether to preserve the tab's content.

$('SELECTOR').glowTabbedPanes('remove', pane);        // preserves content by default
$('SELECTOR').glowTabbedPanes('remove', pane, false); // do not preserve tab content

clear

Removes all tab items from the tab set

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

insert

Adds a new pane to the tabbed panes at a specific index

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

getById

Retrieves an existing pane by its id

var pane = $('SELECTOR').glowTabbedPanes('getById', 'tabId');

getByText

Retrieves an existing pane by its display text

var pane = $('SELECTOR').glowTabbedPanes('getByText', 'text');

getByIndex

Retrieves an existing pane by its indexed position

var pane = $('SELECTOR').glowTabbedPanes('getByIndex', 3);

count

Returns the count of available panes

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

selected

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

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

createTab

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

var pane = $('SELECTOR').glowTabbedPanes('createTab', {
    id:'id',
    text:'text',
    disabled:false,
    onClick:function(){},
    cssClass:'perTabClass'});