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 nesteddiv
elements within the tab with the class names applied, one-per-class.- default:
[]
- 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 nesteddiv
elements within the tab with the class names applied, one-per-class.- default:
[]
- 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 nesteddiv
elements within the tab with the class names applied, one-per-class.- default:
[]
- default:
-
enableResizing
: boolean value of whether to allow resizing of the tab set- default:
true
- default:
-
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'});