JQueryTabpane

On this page:

Plugin Info

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

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
remember enables/disables recording the current tab into the url anchor, as well as initialize the currently selected tab reading the anchor 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"}%