JQueryTabpane

Plugin Info

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

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  
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.

Examples

Tab 1

Tab 1.1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet tellus id ante pretium aliquam. Etiam interdum, turpis in varius facilisis, nibh neque tincidunt sapien, et viverra libero justo et leo. Pellentesque et mi

Tab 1.2

tristique ligula suscipit suscipit. Donec et tortor. Integer eros eros, commodo in, aliquam sit amet, facilisis et, magna. Sed nisl. Pellentesque mattis, quam ut nonummy rutrum, sem felis ultrices nunc, sed mollis dolor diam et purus.

Tab 1.3

Aenean urna. Morbi eros. Quisque mauris magna, rhoncus vitae, ullamcorper ac, volutpat quis, nibh. end of tab 1

Tab 2

Donec ultrices mollis velit. Integer sed eros. Nulla venenatis laoreet leo. Etiam consectetuer, odio sagittis pharetra ornare, est nulla nonummy nisl, quis ultricies nisl elit quis justo. In dictum interdum est. Duis accumsan, nibh mollis commodo rhoncus, ante orci dapibus purus, at pharetra est massa et velit. Fusce ornare nibh ut magna. Nunc sollicitudin, purus et eleifend consectetuer, lectus justo faucibus arcu, et cursus velit felis eu lorem. Nulla aliquet, turpis accumsan feugiat congue, mi arcu ultrices ligula, id ultrices sem elit sed lectus. Curabitur dignissim, dolor non sodales luctus, mi magna tincidunt tellus, at bibendum mauris magna dapibus metus. Donec et libero at erat bibendum blandit. Proin enim nunc, rutrum et, congue mattis, ultrices at, nisl. end of tab 2

Tab 3

Sed a nisi. Maecenas posuere vehicula orci. Proin purus. Nulla condimentum laoreet pede. Morbi sodales, nunc a vestibulum dignissim, lectus felis varius nisl, vitae lacinia sapien dui nec massa. Fusce tempus. Vivamus ac mi. Integer leo. Proin blandit est et sem. Quisque mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc imperdiet viverra purus. Aenean ut turpis ut nibh varius adipiscing. end of tab 3

Tab 4

Sed non ante non nibh pharetra facilisis. Curabitur ut odio. Suspendisse potenti. Fusce aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam lacinia, sapien ut volutpat lobortis, nisi ante auctor quam, vitae placerat dolor arcu dictum massa. Donec dolor. Cras eget dolor. Curabitur id nunc non purus tristique iaculis. Vivamus sit amet sapien. Intege end of tab 4

Tab 1

velit. Fusce ornare nibh ut magna. Nunc sollicitudin, purus et eleifend consectetuer, lectus justo faucibus arcu, et cursus velit felis eu lorem. Nulla aliquet, turpis accumsan feugiat congue, mi arcu ultrices ligula, id ultrices sem elit sed lectus. Curabitur dignissim, dolor non sodales luctus, mi magna tincidunt tellus, at bibendum mauris magna dapibus metus. Donec et libero at erat bibendum blandit. Proin enim nunc, rutrum et, congue mattis, ultrices at,

Tab 2

consectetuer, lectus justo faucibus arcu, et cursus velit felis eu lorem. Nulla sem elit sed lectus. Curabitur dignissim, dolor non sodales luctus, mi magna tincidunt tellus, at bibendum mauris magna dapibus metus. Donec et libero at erat bibendum blandit. Proin enim nunc, rutrum et, congue mattis, ultrices at,

Tab 3

consectetuer, lectus justo faucibus arcu, et cursus velit felis eu lorem. Nulla aliquet, turpis accumsan feugiat congue, mi arcu ultrices ligula, id ultrices sem elit sed lectus. Curabitur dignissim, dolor non sodales luctus, mi magna tincidunt tellus, at bibendum mauris magna dapibus metus. Donec et libero at erat bibendum blandit. Proin enim nunc, rutrum et, congue mattis, ultrices at,

Foo

Later

tristique ligula suscipit suscipit. Donec et tortor. Integer eros eros, commodo in, aliquam sit amet, facilisis et, magna. Sed nisl. Pellentesque mattis, quam ut nonummy rutrum, sem felis ultrices nunc, sed mollis dolor diam et purus.

Ajax Foo

 

Ajax Bar

 

%STARTSECTION{"bar"}%
Aenean urna. Morbi eros. Quisque mauris magna, rhoncus vitae, ullamcorper ac,
volutpat quis, nibh. 
%ENDSECTION{"bar"}%
Topic revision: r1 - 03 Feb 2016, UnknownUser
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