TabbedBrowsing < Main

This page provided tabbed browsing capabilities.  It is based on [[http://twiki.org/cgi-bin/view/Sandbox/TabbedBrowsing][This page from Twiki itself]].  

<noautolink>
<verbatim>
%CALC{$SET(tabs, SomeTopicSummary:Summary, SomeTopicDiscuss:Discuss this page, SomeTopicForm:Modify form)}%
%INCLUDE{Main.TabbedBrowsing}%
</verbatim>
</noautolink>

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

<div id="tab_list">
  <ul>
    <li><a href="#">Summary</a></li>
    <li id="tab_current"><a onClick="return false" href="#">Discuss this page</a></li>
    <li><a href="#">Modify form</a></li>
  </ul>
  <span class="no_tab"><a href="#"><img src="%PUBURL%/%TWIKIWEB%/TWikiDocGraphics/help.gif"/></a></span>
</div>
<br style="clear:both" />

*NOTES*:
   * 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).
      * If you do choose to create a seprarate tab definition topic, you might also want to define the following =editlink= variable: <br>
        =%<nop>CALC{$SET(tabs, ...)}%= <br>
        =%<nop>CALC{$SET(editlink, %<nop>TOPIC%)}%= <br>
        =%<nop>INCLUDE{Main.StandardTabs}%= <br>
        This will put a %PUBURL%/%TWIKIWEB%/TWikiDocGraphics/edittopic.gif button right before the %PUBURL%/%TWIKIWEB%/TWikiDocGraphics/help.gif 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 [[http://www.alistapart.com/articles/slidingdoors/ this site]]. These need to be modified in a way that fits in with the current skin.
   * 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]] (see code below in raw mode).



%X% %RED% *Do not edit below this line unless you know what you are doing.* %ENDCOLOR%
----

%STARTINCLUDE%


<!-- set 'tab_urls' = list of tab urls -->
%CALC{$SET(tab_urls,$LISTMAP($SUBSTITUTE($item,:.*,,,r),$GET(tabs)))}%

<!-- set 'tab_names' = list of tab names -->
%CALC{$SET(tab_names,$LISTMAP($SUBSTITUTE($item,.*:,,,r),$GET(tabs)))}%

<noautolink>
<div id="tab_list">
  <ul>
    %CALC{$LISTJOIN($n, $LISTMAP(<li $IF($FIND($item,%BASETOPIC%),id='tab_current'><a onClick='return false',><a) href='$item'>$LISTITEM($index,$GET(tab_names))</a></li>, $GET(tab_urls)))}%
  </ul>
  <span class="no_tab"><a title="Nav-bar help" href="%SCRIPTURL%/view%SCRIPTSUFFIX%/%WEB%/%TOPIC%"><img src="%PUBURL%/%TWIKIWEB%/TWikiDocGraphics/help.gif"/></a></span>
  %CALC{$IF($EXACT($GET(editlink),),,<span class='no_tab'><a title='Edit nav-bar' href='$GET(editlink)'><img src='%PUBURL%/%TWIKIWEB%/TWikiDocGraphics/edittopic.gif'/></a></span>)}%
</div>
<br style="clear:both" />
</noautolink>

<style>
#tab_list {
      float:left;
      width:100%;
      background:#369 url("http://www.alistapart.com/d/slidingdoors/v2/bg.gif") repeat-x bottom;
      font-size:93%;
      line-height:normal;
      margin-bottom:2em;
}
#tab_list img {
      border:none;
}
#tab_list ul {
      margin:0;
      padding:10px 10px 0;
      list-style:none;
}
#tab_list li {
      float:left;
      background:url("http://www.alistapart.com/d/slidingdoors/v2/right.gif") no-repeat right top;
      margin:0;
      padding:0 5px 0 0;
}
#tab_list a {
      float:left;
      display:block;
      background:url("http://www.alistapart.com/d/slidingdoors/v2/left.gif") no-repeat left top;
      padding:5px 7px 4px 20px;
      text-decoration:none;
      font-weight:bold;
      color:#9cf;
}
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#tab_list a {float:none;}
    /* End IE5-Mac hack */
#tab_list a:hover {
      color:#fff;
}
#tab_list #tab_current {
      background-image:url("http://www.alistapart.com/d/slidingdoors/v2/right_on.gif");
      border-width:0;
}
#tab_list #tab_current a {
      background-image:url("http://www.alistapart.com/d/slidingdoors/v2/left_on.gif");
      color:#333;
      padding-bottom:5px;
}
.no_tab {
      float:right;
}
#tab_list .no_tab a {
      background:none;
      padding:4px 4px 0px 0px;
}
</style>

%STOPINCLUDE%
-- Main.TonyFarrell - 15 Jun 2007
This topic: Main > TabbedBrowsing
Topic revision: r1 - 2007-06-15 - TonyFarrell