TabbedNavigationAddon < TWiki

TWiki Web>TabbedNavigationAddon (31 May 2007, PankajPant? ) (raw view)EditAttach

---+!! Tabbed Navigation Add-On

This application provides tabbed browsing capabilities to TWiki topics (inspired by TWiki:Plugins/NavBarAddOn).

---++ Usage

To link together a set of pages with clickable tabs at the top of the page, all you need is the following code snippet, at the top of each of the linked topics, which
   * defines the list of tabs in the format =TOPIC:NAME= 
   * includes this topic to do the rest of the magic

<noautolink>
<verbatim>
%CALC{$SET(tabs, MyAppHome:Home, MyAppArch:Architecture,           \
                 MyAppImpl:Implementation, MyAppDiscuss:Discuss)}%
%INCLUDE{TWiki.TabbedNavigationInclude}%
</verbatim>
</noautolink>

The above code would get rendered as shown below, assuming that the user is currently viewing the !MyAppArch topic: %BR%
%ATTACHURL%/screen1.png

*Notes:*
   * The syntax is simple but strict. Please ensure that it is correct!
   * The tab associated with the current topic is automatically recognized and highlighted.
   * The topics in the tabs don't need to exist beforehand. The first person to click on the tab, gets to create it (same as TWiki links, but without the "non-existing topic" icon). Don't forget to add the tab definitions to the page!
   * The tabs look best at the top of the page, but you can place them wherever you want.
   * Most of the magic is done by TWiki.SpreadSheetPlugin along with some nifty CSS code _borrowed_ from [[http://www.alistapart.com/articles/slidingdoors/ this site]].

---+++ Reusing tabs in multiple pages

Rather than defining the tabs in each linked topic, it is recommended to create a new topic that defines the tabs and then include this topic into all the topics where the tabs need to be displayed. This improves maintainability and makes it easy to add, delete, rename & reorder tabs. It is also possible to create a generic tab definition template (for instance, one that does not hard-code *<nop>MyApp* in the example above).

To continue with the Box page tabs shown above, here's what would go into the tab definition topic, say !GenericAppTabs: 
<verbatim>
%CALC{$SET(tabs, %APPNAME%Home:%APPNAME% Home,           \
                 %APPNAME%Arch:%APPNAME% Architecture,   \
                 %APPNAME%Impl:%APPNAME% Implementation, \
                 %APPNAME%Discuss:%APPNAME% Discuss)     \
      $SET(split, 2)                                     \
      $SET(editlink, %TOPIC%)}%
%INCLUDE{TWiki.TabbedNavigationInclude}%
</verbatim>

Let's assume that we want to add the tabs to a set of topics related to !CoolApp, namely !CoolAppHome, !CoolAppArch, !CoolAppImpl and !CoolAppDiscuss, we would add the following lines to the top of each of these topics:
<verbatim>
%INCLUDE{"GenericAppTabs" APPNAME="CoolApp"}%
</verbatim>

Here's what we did.
   * Define a tab template, using a variable called =APPNAME=.
      * The =editlink= line tells the utility to add a %ICON{pencil}% button right before the %ICON{help}% button, pointing to the tab definition page, i.e. !GenericAppTabs.
      * The =split= line tells the utility to split the tabs into two rows, with 2 in the top row and the rest in the second row. Normally, if there are too many tabs or if the tab names are long they will wrap around into multiple lines as needed. This just lets you control how the tabs are split.
   * In the topics where we want the tabs, we _define_ the APPNAME variable in the %<nop>INCLUDE%.

Here's what it would look like: %BR%
%ATTACHURL%/screen2.png

---+++ Customization 

   * Yes, I know that the tabs are a little bit "in your face", but I'm no graphics expert. Feel free to tweak the images attached to this topic. You need to fix =bg.gif=, =left.gif=, =right.gif=, =left_on.gif= and =right_on.gif=.

---++ Add-On Installation Instructions

__Note:__ You do not need to install anything on the browser to use this add-on. The following instructions are for the administrator who installs the add-on on the server where TWiki is running. 

   * Download the ZIP file from the Add-on Home (see below)
   * Unzip ==%TOPIC%.zip== in your twiki installation directory. Content:
     | *File:* | *Description:* |
     | ==data/TWiki/TabbedNavigationAddon.txt== | Add-on topic |
     | ==data/TWiki/TabbedNavigationAddon.txt,v== | Add-on topic repository |
     | ==data/TWiki/TabbedNavigationInclude.txt== | Add-on include topic |
     | ==data/TWiki/TabbedNavigationInclude.txt,v== | Add-on include topic repository |
     | ==pub/TWiki/TabbedNavigationAddon/bg.gif== | Tab background image |
     | ==pub/TWiki/TabbedNavigationAddon/left.gif== | Tab left image |
     | ==pub/TWiki/TabbedNavigationAddon/right.gif== | Tab right image |
     | ==pub/TWiki/TabbedNavigationAddon/left_on.gif== | Tab left active image |
     | ==pub/TWiki/TabbedNavigationAddon/right_on.gif== | Tab right active image |
     | ==pub/TWiki/TabbedNavigationAddon/screen1.png== | Example 1 |
     | ==pub/TWiki/TabbedNavigationAddon/screen2.png== | Example 2 |
     | ==bin/foobar== | Add-on script |
   * Test if the installation was successful:
      * _describe, with example_

---++ Add-On Info

   * Set SHORTDESCRIPTION = one line description here

|  Add-on Author: | TWiki:Main.PankajPant |
|  Copyright: | &copy; 2006, TWiki:Main.PankajPant |
|  License: | GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]]) |
|  Add-on Version: | 30 May 2007 (V1.000) |
|  Change History: | <!-- versions below in reverse order -->&nbsp; |
|  30 May 2007: | Initial version |
|  TWiki Dependency: | $TWiki::Plugins::VERSION 1.1 (TWiki 4.0) |
|  CPAN Dependencies: | none |
|  Other Dependencies: | none |
|  Perl Version: | 5.005 |
|  Add-on Home: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC% |
|  Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev |
|  Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal |

__Related Topic:__ %TWIKIWEB%.TWikiAddOns, TWiki:Plugins/NavBarAddOn.



-- Main.PankajPant - 30 May 2007

Attachments

Topic attachments
I	Attachment	Action	Size	Date	Who	Comment
gif	bg.gif	manage	0.2 K	31 May 2007 - 02:27	PankajPant?	Background
gif	left.gif	manage	0.8 K	31 May 2007 - 02:27	PankajPant?	Left
gif	left_on.gif	manage	2.2 K	31 May 2007 - 02:28	PankajPant?	Left active
gif	right.gif	manage	0.1 K	31 May 2007 - 02:27	PankajPant?	Right
gif	right_on.gif	manage	0.3 K	31 May 2007 - 02:28	PankajPant?	Right active
png	screen1.png	manage	62.1 K	31 May 2007 - 02:44	PankajPant?	Example 1 screenshot
png	screen2.png	manage	103.4 K	31 May 2007 - 02:45	PankajPant?	Example 2 screenshot

Topic revision: r1 - 31 May 2007 - 02:51:46 - PankajPant?

TWiki

Webs
DnD
Main
Support
TWiki

Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.TabbedNavigationAddon