JQueryTabpane

Plugin Info

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

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%
  

• Example: see JQueryTabpane for more examples
• 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
  animate	(on/off) enables/disables animation of switching tabs	off

• Related: VarTAB, VarENDTAB, VarENDTABPANE, JQueryPlugin, JQueryTabpane

ENDTABPANE -- ending tag for tabpane widget

• This closes a previously opened TABPANE.
• no parameters
• Related: VarTAB, VarENDTAB, VarTABPANE, JQueryPlugin, JQueryTabpane

TAB{"text" ...} -- 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

• Related: VarENDTAB, VarTABPANE, VarENDTABPANE, JQueryPlugin, JQueryTabpane

ENDTAB -- ending marker for a tab of a tabpane

• This closes a previously opened TAB.
• no parameters
• Related: VarTAB, VarTABPANE, VarENDTAB, JQueryPlugin, JQueryTabpane

Examples

Foo

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