CreateTabbedPages
A quick howto on using {jstabs} to create tabbed pages
Created by: MsTeryGuest, Last modification: 12 Aug 2005 (05:50 UTC)
Creating tabbed pages in Bitweaver is made extremely easy through the use of custom smarty tags provided by the framework.
You can use the following tags within a smarty template file to set this up:
{jstabs} defines a block of multiple tabs. End the block with {/jstabs}
{jstab title="Text to appear on Tab"} defines one of the tabbed pages along with the text that will appear in the tab area. End with {/jstab}
{legend legend="Page Legend"} Places the legend text at the top of the page formatted according the current css rules in use. End with {/legend}
Example:
{code()}
{jstabs}
{jstab title="Sample Tab1"}
{legend legend="This is the Legend"}
Anything you put here will be on a tab page
{/legend}
{/jstab}
{jstab title="Sample Tab2"}
{legend legend="Tab2 Legend Text"}
This is on the second tabbed page
{/legend}
{/jstab}
{jstab title="Sample Tab3"}
{legend legend="And now were at tab 3"}
Anything you put here will be on a tab page
{/legend}
{/jstab}
{/jstabs}
{code}
And the result looks like this (using the default style)
You can use the following tags within a smarty template file to set this up:
{jstabs} defines a block of multiple tabs. End the block with {/jstabs}
{jstab title="Text to appear on Tab"} defines one of the tabbed pages along with the text that will appear in the tab area. End with {/jstab}
{legend legend="Page Legend"} Places the legend text at the top of the page formatted according the current css rules in use. End with {/legend}
Example:
{code()}
{jstabs}
{jstab title="Sample Tab1"}
{legend legend="This is the Legend"}
Anything you put here will be on a tab page
{/legend}
{/jstab}
{jstab title="Sample Tab2"}
{legend legend="Tab2 Legend Text"}
This is on the second tabbed page
{/legend}
{/jstab}
{jstab title="Sample Tab3"}
{legend legend="And now were at tab 3"}
Anything you put here will be on a tab page
{/legend}
{/jstab}
{/jstabs}
{code}
And the result looks like this (using the default style)