This page (revision-9) was last changed on 29-Apr-2016 21:09 by Dirk Frederickx 

This page was created on 04-Jan-2014 12:32 by Juan Pablo

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Version Date Modified Size Author Changes ... Change note
9 29-Apr-2016 21:09 3 KB Dirk Frederickx to previous removed dirt
8 31-Mar-2016 21:49 3 KB Juan Pablo to previous | to last +18556394698 windows 10 online technical support Toll free number ==> JSPWikiStyle
7 31-Mar-2016 19:07 3 KB smith to previous | to last JSPWikiStyle ==> +18556394698 windows 10 online technical support Toll free number
6 24-Jun-2015 17:35 3 KB DirkFrederickx to previous | to last
5 24-Jun-2015 17:34 1 KB DirkFrederickx to previous | to last
4 23-Jun-2015 18:23 3 KB DirkFrederickx to previous | to last
3 23-Jun-2015 18:22 3 KB DirkFrederickx to previous | to last
2 04-Jan-2014 15:30 3 KB Harry Metske to previous | to last linked to category.documentation + minor updates
1 04-Jan-2014 12:32 3 KB Juan Pablo to last and more content based on original page..
Incoming links Outgoing links
TabbedSections
TabbedSections

Difference between version and

At line 1 added 2 lines
%%prettify-nonum
[{TableOfContents}]
At line 3 changed 3 lines
This %%category [JSPWikiStyle]%% allows to add tabbed sections to your wiki pages,
similar to the ones used in edit or page-info mode.
The formatting of the tabs can be customised in the jspwiki.css.
This %%category [JSPWikiStyle]%% allows you to add dynamic tab functionality to your pages, through the use of {{%~%tabbedSection}} or {{%~%tabs}} markup.
At line 7 added 2 lines
See also [TabbedSectionTag], [Accordion Style|Accordion]
At line 9 changed 6 lines
Enclose all tabbed sections inside a __%~%tabbedSection ../~%__.
Next, add each tabbed section inside a __%~%tab-''tabname'' .. /~%__.
Replace ''tabname'' with the name of your tab: use only
alphanumeric characters or a dash in the name of your tabs
(no other punctuations), the name of the tab may not start with a digit.
(css classname restrictions) Use ~CapitalisedWords for multi-word tabnames.
The original {{%~%tabbedSection}} container works in combination with {{%~%tab-''tab-name''}} style.\\
Note: the ''tab-name'' may only contain alphanumeric characters or a dash; no other punctuations are allowed, and may not start with a digit. \\
Use ~CapitalisedWords for multi-word tab names.
At line 16 changed 3 lines
When the page loads, only the first tab will be visible.
All other sections are hidden, until you click the corresponding tab.
%%columns
At line 21 removed one line
At line 25 removed one line
At line 24 added 11 lines
/%
}}}
----
%%tabbedSection
%%tab-ThisIsMyFirstTab
Some text inside the first tab.
/%
%%tab-ThisIsMyLastTab
Some other text inside the second tab.
/%
/%
At line 37 added 13 lines
%%information The {{%~%tabs}} and {{%~%pills}} only work in the [Haddock Template] /%
%%label-warning new/% You can now also use {{%~%tabs}} shorthand markup. Just use simple header markup (!, !!, !!!) to identify a new tabbed panes. The weight of the first header determines the header-level of all tabs, so you can still use headers (of another weight) inside a tab pane.\\
Note: since tabs are in this case identified by header markup, such tabs also appear in the TableOfContents. You cannot mix the original and the simplied markup styles in one tabbed section.
%%columns
{{{
%%tabs
!This Is My First Tab
Some text inside the first tab.
!This Is My Last Tab
Some other text inside the second tab.
/%
At line 51 added 8 lines
----
%%tabs
!This Is My First Tab
Some text inside the first tab.
!This Is My Last Tab
Some other text inside the second tab.
/%
/%
At line 33 removed one line
!! Reality check:
At line 35 changed one line
%%tabbedSection
%%label-warning new/% The {{%~%pills}} style will give your tabs another layout. You can use it with either the original or simplified markup.
At line 37 changed 2 lines
%%tab-LoremIpsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dictum velit eget risus. Fusce ligula. Maecenas vitae velit eget odio pulvinar aliquet. Quisque ultricies mollis lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent dapibus odio. Nullam sodales erat vel pede. Morbi ut turpis. Sed sed metus. Donec ut dui. Duis gravida risus non nibh. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam dolor urna, tincidunt eget, posuere nec, suscipit quis, arcu. Proin pede risus, placerat id, tincidunt eu, consequat in, sem. Sed eu sapien. Vestibulum turpis. Sed fringilla odio vel eros. Mauris in libero sed sapien mattis pellentesque. Cras aliquet nibh sit amet tortor. Nam nunc.
%%columns
{{{
%%pills
%%tab-ThisIsMyFirstTab
Some text inside the first tab.
At line 69 added 4 lines
%%tab-ThisIsMyLastTab
Some other text inside the second tab.
/%
/%
At line 41 changed 2 lines
%%tab-NullamSodales
Nullam sodales erat vel pede. Morbi ut turpis. Sed sed metus. Donec ut dui. Duis gravida risus non nibh. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam dolor urna, tincidunt eget, posuere nec, suscipit quis, arcu. Proin pede risus, placerat id, tincidunt eu, consequat in, sem. Sed eu sapien. Vestibulum turpis. Sed fringilla odio vel eros. Mauris in libero sed sapien mattis pellentesque. /%
}}}
----
%%pills
%%tab-ThisIsMyFirstTab
Some text inside the first tab.
/%
%%tab-ThisIsMyLastTab
Some other text inside the second tab.
/%
/%
At line 44 removed 2 lines
%%tab-Cras
Cras aliquet nibh sit amet tortor. Nam nunc.
At line 86 added 8 lines
%%columns
{{{
%%pills
!This Is My First Tab
Some text inside the first tab.
!This Is My Last Tab
Some other text inside the second tab.
At line 95 added 8 lines
}}}
----
%%pills
!This Is My First Tab
Some text inside the first tab.
!This Is My Last Tab
Some other text inside the second tab.
/%
At line 49 changed one line
!! Notes / FAQ
/%
----
!! FAQ
At line 51 changed one line
;How can you float content next to a tabbed section ?: A %~%tabbedSections always occupies the full width of the page, and does not allow to float other content next to it. Use css trickery to work around this limitation: wrap the %~%tabbedSection in a floating block with a reduced width.
;How can you float content next to a tabbed section ?: Tabs always occupy the full width of the page, and do not allow to float other content next to it. You can of course wrap the {{%~%tabbedSection}} in an extra block with a reduced width.
At line 58 changed one line
%%tab-ThisIsMyFirstTab
%%tab-ThisIsTheFirstTab
At line 61 changed one line
%%tab-ThisIsMyLastTab
%%tab-ThisIsTheLastTab
At line 67 removed 2 lines
%%(clear:both)
At line 70 removed 3 lines
----
[Category.Documentation]
This page (revision-9) was last changed on 29-Apr-2016 21:09 by Dirk Frederickx  Top