Add new attachment

Only authorized users are allowed to upload new attachments.

This page (revision-3) was last changed on 20-Nov-2007 21:59 by DirkFrederickx  

This page was created on 04-Mar-2007 23:04 by DirkFrederickx

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Difference between version and

At line 1 changed 115 lines
!! Accordion Section
This %%category [JSPWikiStyle]%% allows you to add horizontol or vertical accordion sections to your wiki pages.
An accordion is an animated set of tabs. When clicking one of the tabs, all others are being closed.
The opening or closing of tabs happens in a smooth animated way.
There are two accordion types:
* {{%~%accordion}}: standard accordion with tabs positioned vertically. ([example|http://www.solutoire.com/experiments/mootools/acc_ex3.html])
This is great for [LeftMenu's|LeftMenu]
* {{%~%tabbedAccordion}}: tabs are positioned one behind the other like a tabbed book, similar to the good old [tabbed sections|BrushedTemplateTabbedSection] but with stunning visual effect
--[DF|DirkFrederickx], Jan 07, part of [BrushedTemplate]
\\
\\
%%tabbedSection
%%tab-Accordion
! Accordion
This [JSPWikiStyle] generates a set of vertical tabs with accordion effect.
With only one tab, you can use this as a replacement of a [collapsable box|BrushedTemplateCollapseBox]
Enclose all accordion tabs with a __%~%accordion__ and
start each tab with a [JSPWikiStyle] prefixed with __''tab-''__
such as %~%tab-~FirstTab.
The name of your tabs may only contain alphanumeric characters and a dash.
(no other punctuations), It can not start with a digit.
(css classname restrictions)
When the page loads, only the first tab will be visible.
All other tabs are hidden, until you click the corresponding tab.
Note: when printing, only the visible tabs are shown.
{{{
%%accordion
%%tab-FirstTab
...
/%
%%tab-SecondTab
...
/%
/%
}}}
Reality check:
%%(width:600px;)
%%accordion
%%tab-FirstTopic
!This is the first tab
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tempus ante nec ipsum. In ut felis id leo aliquet euismod. augue lorem, posuere eu, tincidunt non, bibendum quis, nisl. Integer erat erat, posuere vel, convallis feugiat, accumsan ac, sem. Sed scelerisque tortor nec leo. Etiam vel massa vitae nulla elementum aliquet. Donec egestas semper tellus. Donec ultrices ante cursus lacus. Integer nec est. Suspendisse potenti. Donec fringilla. Maecenas condimentum, arcu sit amet volutpat tincidunt, mi urna sodales nunc, eget porttitor odio lectus sit amet metus. Vivamus aliquam. Etiam lectus leo, venenatis sit amet, vestibulum eu, sollicitudin vitae, metus.
/%
%%tab-SecondTopic
!This is the second tab
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut molestie nunc eu turpis. Donec facilisis enim sed dui. Sed nunc. Cras eu arcu. Praesent vel augue vel dolor ultricies convallis. Nam consectetuer risus eu urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam suscipit. Duis quis lacus sed tellus auctor blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eget massa in ante vehicula pharetra. Ut massa pede, ornare id, ultrices eget, porta et, metus.
/%
%%tab-ThirdTopic
!This is the short third tab
* Vestibulum ante ipsum primis ...
* Ut molestie nunc eu turpis. ...
* Donec facilisis enim sed dui.
/%
/%
/%
/%
%%tab-TabbedAccordion
! Tabbed Accordion
This [JSPWikiStyle] generates a set of horizontal tabs with accordion effect.
It is similar to [BrushedTemplateTabbedSections] but the transition between the tabs is gradual with a fading effect.
{{{
%%tabbedAccordion
%%tab-FirstTopic
...
/%
%%tab-SecondTopic
...
/%
/%
}}}
Reality check:
%%(width:600px;)
%%tabbedAccordion
%%tab-FirstTopic
!This is the first tab
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tempus ante nec ipsum. In ut felis id leo aliquet euismod. augue lorem, posuere eu, tincidunt non, bibendum quis, nisl. Integer erat erat, posuere vel, convallis feugiat, accumsan ac, sem. Sed scelerisque tortor nec leo. Etiam vel massa vitae nulla elementum aliquet. Donec egestas semper tellus. Donec ultrices ante cursus lacus. Integer nec est. Suspendisse potenti. Donec fringilla. Maecenas condimentum, arcu sit amet volutpat tincidunt, mi urna sodales nunc, eget porttitor odio lectus sit amet metus. Vivamus aliquam. Etiam lectus leo, venenatis sit amet, vestibulum eu, sollicitudin vitae, metus.
/%
%%tab-SecondTopic
!This is the second tab
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut molestie nunc eu turpis. Donec facilisis enim sed dui. Sed nunc. Cras eu arcu. Praesent vel augue vel dolor ultricies convallis. Nam consectetuer risus eu urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam suscipit. Duis quis lacus sed tellus auctor blandit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eget massa in ante vehicula pharetra. Ut massa pede, ornare id, ultrices eget, porta et, metus.
/%
%%tab-ThirdTopic
!This is the short third tab
* Vestibulum ante ipsum primis ...
* Ut molestie nunc eu turpis. ...
* Donec facilisis enim sed dui.
/%
/%
/%
/%
%%tab-Implementation
! Implementation
Based on the Accordion plugin of [Mootools Javascript Library], with some enhancements to support dynamic height and width of the tab contents.
/%
/%
See [AccordionStyle]
Version Date Modified Size Author Changes ... Change note
3 20-Nov-2007 21:59 0.022 kB DirkFrederickx to previous
2 04-Mar-2007 23:05 5.218 kB DirkFrederickx to previous | to last Documentation Update. Prepare for next version.
1 04-Mar-2007 23:04 5.199 kB DirkFrederickx to last Documentation Update. Prepare for next version.
« This page (revision-3) was last changed on 20-Nov-2007 21:59 by DirkFrederickx