JQueryTabpane

Plugin Info

Homepage: http://foswiki.org/Extensions/JQueryPlugin
Author(s): Michael Daum
Version: 2.01

Summary

This implements an alternative tabpane widget. There is already one in jquery-ui, however as long as jquery-ui is still in flux, this alternative offers a safe substitute well integrated into Foswiki.

Individual tabs can be loaded on demand using a REST call. Installing Foswiki:Extensions/RenderPlugin is recommended for that.

Tabpanes can be nested. Tabs can be extended in height automatically. Heights can be auto-updated to follow windows resize events. Tabpanes can be established as part of reloaded content via ajax.

Note that this widget does not participate in jquery-ui themerolling. It does match JQueryButton in terms of look & feel.

Macros

TABPANE -- tabpane widget

This macro starts the tabpane, containing a series of TAB...ENDTABs and ends with ENDTABPANE. A complete tabpane normally looks like this:

%TABPANE%
 %TAB{"tab 1"}%
   ...
 %ENDTAB%
 %TAB{"tab 2"}%
   ...
 %ENDTAB%
%ENDTABPANE%

Multiple tabpanes can be nested using the following scheme:

%TABPANE%
 %TAB{"tab 1"}%
   %TABPANE%
     %TAB{"tab 1.1"}%
       ...
     %ENDTAB%
     %TAB{"tab1.2"}%
       ...
     %ENDTAB%
   %ENDTABPANE%
 %ENDTAB%
 %TAB{"tab 2"}%
   ...
 %ENDTAB%
%ENDTABPANE%

Parameters

Parameter	Description	Default
select	number or id of tab to select	1
automaxexpand	resizes the tabpane to the maximum height to fit into the window	off
minheight	when automaxexpand is enabled, this is the minimum size a tab is allowed to be resized	230
class	extra class: use simple for a non-3D tabpane; use=plain= for a no-frame look&feel
animate	enables/disables animation of switching tabs	off

Examples

see JQueryTabpane for more examples

ENDTABPANE -- ending tag for tabpane widget

This closes a previously opened TABPANE.

TAB -- tab inside a tabpane widget

Defines a tab inside a TABPANE area; must be closed using ENDTAB.

Parameters

Parameter	Description	Default
"text"	label of the tab	Tab
before	when switching tabs, this is the javascript fragment to be executed just before the tab is displayed
after	this javascript handler is to be executed after the tab has been made visible
afterload	this javascript handler will be called when content loaded asynchronously (using the url parameter, below) has finished loading; depending on the network latency, this can be significantly later than execution of the after handler above
id	id of this tab; this id can be used in the TABPANEs select parameter to display this tab; this id is also added to the class attribute of the html element representing the tab button
url	link from where to load the content of the tab asynchronously when selecting this tab; the result of the addressed handler will replace the content area; if no url is set the content of the TAB ... ENDTAB area will be shown when the tab is selected
width	width of the tab area	auto
height	height of the tab area	auto
container	element where ajax content will be loaded; this is only used together with url

ENDTAB -- ending marker for a tab of a tabpane

This closes a previously opened TAB.

JavaScript API

Each .jqTabPane DOM node has got an instance of the TabPane javascript class attached to it that implements its behaviour. This instance can be accessed via the HTML5 data attribute tabPane:

var tb = $(".jqTabPane").data("tabPane");

The returned object tb can then be used directly to control the related .jqTabPane DOM. The most useful methods are listed below:

Method	Description
getNextTab([selector])	get the next tab following the current one or the one specified by selector
hideTab([selector])	hide the current tab or the one specified by selector
showTab([selector])	show the current tab or the one specified by selector
switchTab(selectorOrObject)	switch to the tab specified by a selector or a tab object

Examples

Foo

%STARTSECTION{"bar"}%
Aenean urna. Morbi eros. Quisque mauris magna, rhoncus vitae, ullamcorper ac,
volutpat quis, nibh. 
%ENDSECTION{"bar"}%