JQueryTabpane

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%
    
  • 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

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

Examples

Foo

%STARTSECTION{"bar"}%
Aenean urna. Morbi eros. Quisque mauris magna, rhoncus vitae, ullamcorper ac,
volutpat quis, nibh. 
%ENDSECTION{"bar"}%
Topic revision: r1 - 23 Aug 2010, ProjectContributor
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback