| -Tabbed Pages
|
| +Creating tabbed pages in Bitweaver is made extremely easy through the use of custom smarty tags provided by the framework. |
|
|
| -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: |
|
|
| -You can use the following tags within a smarty template file
|
| -to set this up:
|
| +~~blue:{jstabs}~~ defines a block of multiple tabs. End the block with ~~blue:{/jstabs}~~ |
|
|
| - {jstabs}
|
| - defines a block of multiple tabs. End the block with {/jstabs}
|
| +~~blue:{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 ~~blue:{/jstab}~~ |
|
|
| - {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}
|
| +~~blue:{legend legend="Page Legend"}~~ Places the legend text at the top of the page formatted according the current css rules in use. End with ~~blue:{/legend}~~ |
|
|
| - {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:
|
| +__Example:__ |
| +{code()} |
| +{jstabs} |
| + {jstab title="Sample Tab1"} |
| + {legend legend="This is the Legend"} |
| + <div> |
| + Anything you put here will be on a tab page |
| + </div> |
| + {/legend} |
| + {/jstab} |
|
|
| - {jstabs}
|
| - {jstab title="Sample Tab1"}
|
| - {legend legend="This is the Legend"}
|
| - <div>
|
| - Anything you put here will be on a tab
|
| - </div>
|
| - {/legend}
|
| - {/jstab}
|
| + {jstab title="Sample Tab2"} |
| + {legend legend="Tab2 Legend Text"} |
| + <div> |
| + This is on the second tabbed page |
| + </div> |
| + {/legend} |
| + {/jstab} |
|
|
| - {jstab title="Sample Tab2"}
|
| - {legend legend="Tab2 Legend Text"}
|
| - <div>
|
| - This is on the second tabbed page
|
| - </div>
|
| - {/legend}
|
| - {/jstab}
|
| -
|
| - {jstab title="Sample Tab3"}
|
| - {legend legend="And now were at tab 3"}
|
| - <div>
|
| - Anything you put here will be on a tab
|
| - </div>
|
| - {/legend}
|
| - {/jstab}
|
| - {/jstabs}
|
| + {jstab title="Sample Tab3"} |
| + {legend legend="And now were at tab 3"} |
| + <div> |
| + Anything you put here will be on a tab page |
| + </div> |
| + {/legend} |
| + {/jstab} |
| +{/jstabs} |
| +{code} |
|
|
| And the result looks like this (using the default style)
|
|
|
| +{attachment id=113} |
|
|
|
|
| -
|
| -
|
| -
|
| -
|
| -
|
| - {img src= width= height= align= desc= link= } |