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

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

The above code would get rendered as shown below, assuming that the user is currently viewing the MyAppArch topic:

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 SpreadSheetPlugin along with some nifty CSS code borrowed from 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 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:

%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}%

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:

%INCLUDE{"GenericAppTabs" APPNAME="CoolApp"}%

Here's what we did.

• Define a tab template, using a variable called APPNAME.
  • The editlink line tells the utility to add a button right before the 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 %INCLUDE%.

Here's what it would look like:

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 TabbedNavigationAddon.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

Related Topic: TWikiAddOns, TWiki:Plugins/NavBarAddOn.

-- PankajPant? - 30 May 2007