Tabbed browsing

This page provides tabbed browsing capabilities to TWiki topics. See TopicComponents? and NavBarAddOn? for related topics.

I know that Peter intentionally used tables in NavBarAddOn? to support older browsers, but this can be made much prettier using CSS as demonstrated here. If the CSS styles are disabled (or not supported) then it falls back to a simple HTML list, which is good enough IMHO.

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 using %CALC% in the format TOPIC:NAME
• includes this topic to do the rest of the magic

%CALC{$SET(tabs, SomeTopicSummary:Summary, SomeTopicDiscuss:Discuss this page, SomeTopicForm:Modify form)}%
%INCLUDE{Sandbox.TabbedBrowsing}%

The above code would get rendered like this (links deactivated), assuming that the user is currently viewing the SomeTopicDiscuss topic:

• Summary
• Discuss this page
• Modify form

NOTES:

• The functionality supported is much simpler than NavBarAddOn? , but the point is to illustrate the possibilities.
• The tab associated with the current topic is automatically recognized and properly highlighted.
• The topics in the tabs don't need to exist. The first person to click on the tab, gets to create it (same as TWiki links, but without the TopicDoesNotExist icon).
• It is probably best to make a GenericTabDefn topic and add these lines into it. Then include that page into all the linked topics. This improves maintainability and makes it easy to add/delete/reorder tabs.
  • If you do choose to create a seprarate tab definition topic, you might also want to define the following editlink variable:
    %CALC{$SET(tabs, ...)}%
%CALC{$SET(editlink, %TOPIC%)}%
%INCLUDE{Main.StandardTabs}%
    This will put a button right before the button, pointing to the tab definition page.
• The tabs look best at the top of the page, but you can place them whereever you want.
• The tab graphics point to this site. These need to be modified in a way that fits in with the current skin.
• Most of the magic is done by SpreadSheetPlugin along with some nifty CSS code borrowed from this site (see code below in raw mode).

-- PankajPant? - 07 Jan 2006

Comments/Suggestions

Thanks Pankaj, this is a cool and useful widget. Consider packaging it as an AddOnPackage? .

-- PeterThoeny? - 08 Jan 2006

Oh Yes!

But you'll have to figure out some way to decouple the graphics from the remote site, maybe make them more configurable.

-- AntonAylward? - 09 Jan 2006

Added and buttons in the nav-bar to point to this topic and the nav-bar definition topic (optional) respectively.

I'll try to convert it into a package when I get time (which will be at least a couple of weeks off). The nav-bar images of course will need to be redefined, preferably something that matches the PatternSkin color scheme. That said, this utility is usable almost as is.

-- PankajPant? - 15 Jan 2006

-- ArjunDas? - 25 Jan 2006

Do not edit below this line unless you know what you are doing.

-- ChrisHogan - 16 May 2006