Page History

Excerpt
The tabs are stored on a separate page within the space and then imported in to the left sidebar...

The Basics

We create the tab effect in two key stages:

...

We start with a block of wiki notation like the following, on the Tabs page (which also contains the tab images as page attachments):

Code Block


{builder-show:title=Home}
 {menulink:home|tooltip=Home|class=stab}!Tabs^tab0.gif!{menulink}
 {bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
 {bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
 {menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
 {bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
 {bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
 {bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
 {bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
 {menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
 {style}.atb-leftslider {background-color:#cbffcf;}{style}
{builder-show}

...

To get round this problem we created a user macro called "bshow", set it to have a body (unprocessed) and output wiki notation. The macro template is as follows:

Code Block
{builder-show:page=${param0}}${body}{builder-show}

When you then call:

Code Block
{bshow:About}{menulink:wikipage\|page=About\|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}

The actual output is rendered as:

Code Block
{builder-show:title=About}{menulink:wikipage\|page=About\|tooltip=About}!Tabs^tab4.gif!{menulink}{builder-show}

...

For the selected tab, we also use an inline style to set the background colour of the left slider bar to the same colour as the selected tab:

Code Block
{style}.atb-leftslider {background-color:#cbffcf;}{style}

...

We mentioned at the start of the tutorial that the full wiki notation was somewhat verbose - here it is in full:

Code Block


{builder-show:title=Home}
 {menulink:home|tooltip=Home|class=stab}!Tabs^tab0.gif!{menulink}
 {bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
 {bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
 {menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
 {bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
 {bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
 {bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
 {bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
 {menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
 {style}.atb-leftslider {background-color:#cbffcf;}{style}
{builder-show}{builder-show:title=About|recurse=true}
 {menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
 {menulink:wikipage|page=About|tooltip=About|class=stab}!Tabs^tab4.gif!{menulink}
 {bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
 {menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
 {bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
 {bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
 {bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
 {bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
 {menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
 {style}.atb-leftslider {background-color:#e0fef6;}{style}
{builder-show}{builder-show:title=Forum|recurse=true}
 {menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
 {bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
 {menulink:wikipage|page=Forum|tooltip=Forum|class=stab}!Tabs^tab6.gif!{menulink}
 {menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
 {bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
 {bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
 {bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
 {bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
 {menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
 {style}.atb-leftslider {background-color:#ffe4ce;}{style}
{builder-show}{builder-show:context=blogpost,space-blogposts}
 {menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
 {bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
 {bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
 {menulink:news|tooltip=News|class=stab}!Tabs^tab3.gif!{menulink}
 {bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
 {bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
 {bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
 {bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
 {menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
 {style}.atb-leftslider {background-color:#ffcbcb;}{style}
{builder-show}{builder-show:title=Tutorials|recurse=true}
 {menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
 {bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
 {bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
 {menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
 {menulink:wikipage|page=Tutorials|tooltip=Tutorials|class=stab}!Tabs^tab7.gif!{menulink}
 {bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
 {bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
 {bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
 {menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
 {style}.atb-leftslider {background-color:#e4ffcb;}{style}
{builder-show}{builder-show:title=Documentation|recurse=true}
 {menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
 {bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
 {bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
 {menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
 {bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
 {menulink:wikipage|page=Documentation|tooltip=Documentation|class=stab}!Tabs^tab8.gif!{menulink}
 {bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
 {bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
 {menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
 {style}.atb-leftslider {background-color:#cbe6ff;}{style}
{builder-show}{builder-show:title=Support|recurse=true}
 {menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
 {bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
 {bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
 {menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
 {bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
 {bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
 {menulink:wikipage|page=Support|tooltip=Support|class=stab}!Tabs^tab1.gif!{menulink}
 {bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
 {menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
 {style}.atb-leftslider {background-color:#fffed1;}{style}
{builder-show}{builder-show:title=Development|recurse=true}
 {menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
 {bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
 {bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
 {menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
 {bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
 {bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
 {bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
 {menulink:wikipage|page=Development|tooltip=Development|class=stab}!Tabs^tab2.gif!{menulink}
 {menulink:index|tooltip=Navigate}!Tabs^tab5.gif!{menulink}
 {style}.atb-leftslider {background-color:#d3caff;}{style}
{builder-show}{builder-show:context=space-pages}
 {menulink:home|tooltip=Home}!Tabs^tab0.gif!{menulink}
 {bshow:About}{menulink:wikipage|page=About|tooltip=About}!Tabs^tab4.gif!{menulink}{bshow}
 {bshow:Forum}{menulink:wikipage|page=Forum|tooltip=Forum}!Tabs^tab6.gif!{menulink}{bshow}
 {menulink:news|tooltip=News}!Tabs^tab3.gif!{menulink}
 {bshow:Tutorials}{menulink:wikipage|page=Tutorials|tooltip=Tutorials}!Tabs^tab7.gif!{menulink}{bshow}
 {bshow:Documentation}{menulink:wikipage|page=Documentation|tooltip=Documentation}!Tabs^tab8.gif!{menulink}{bshow}
 {bshow:Support}{menulink:wikipage|page=Support|tooltip=Support}!Tabs^tab1.gif!{menulink}{bshow}
 {bshow:Development}{menulink:wikipage|page=Development|tooltip=Development}!Tabs^tab2.gif!{menulink}{bshow}
 {menulink:index|tooltip=Navigate|class=stab}!Tabs^tab5.gif!{menulink}
 {style}.atb-leftslider {background-color:#ffcdfe;}{style}
{builder-show}

...

Page tree

Versions Compared

Old Version 6

New Version 7

Key

The Basics