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:
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 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 pencil button right before the 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 %INCLUDE%.

Here's what it would look like:
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 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

Add-on Author: TWiki:Main.PankajPant
Copyright: © 2006, TWiki:Main.PankajPant
License: GPL (GNU General Public License)
Add-on Version: 30 May 2007 (V1.000)
Change History:  
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/TabbedNavigationAddon
Feedback: http://TWiki.org/cgi-bin/view/Plugins/TabbedNavigationAddonDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/TabbedNavigationAddonAppraisal

Related Topic: TWikiAddOns, TWiki:Plugins/NavBarAddOn.

-- PankajPant? - 30 May 2007

Topic attachments
I Attachment Action Size Date Who Comment
gifgif bg.gif manage 0.2 K 31 May 2007 - 02:27 PankajPant? Background
gifgif left.gif manage 0.8 K 31 May 2007 - 02:27 PankajPant? Left
gifgif left_on.gif manage 2.2 K 31 May 2007 - 02:28 PankajPant? Left active
gifgif right.gif manage 0.1 K 31 May 2007 - 02:27 PankajPant? Right
gifgif right_on.gif manage 0.3 K 31 May 2007 - 02:28 PankajPant? Right active
pngpng screen1.png manage 62.1 K 31 May 2007 - 02:44 PankajPant? Example 1 screenshot
pngpng 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?
 
This site is powered by the TWiki collaboration platformCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback