TabsMenu


This is what you will get:
(image: http://www.home.no/foof/tabs.jpg)

By adding this piece of code on your pages:
:::[[FirstPage This is the first tab]]::[[SecondPage Second tab]]::@[[ThirdPage Third tab]]::[[LastPage Last tab]]:::

It's the character @ after the double or triple colon that marks the tab as active.

..and here is what you need to add to your wikka system:

In wikka.css add:
/* Action: tab */
.tabline {
    margin: 0px;
    padding: 1px;
    border-bottom: 1px solid #000;
}
.activetab {
    margin: 0px;
    padding: 3px 4px 1px 4px; /* top right bottom left */
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
.inactivetab {
    margin: 0px;
    padding: 1px 4px 1px 4px; /* top right bottom left */
    border: 1px solid #000;
    background-color: #E0E0E0;
}

You might need to change the background color of your inactive tabs, it depends on what your normal background color is.

In wakka.php add this:
  1.         // TabsMenu
  2.         else if (preg_match("/^:::(.*?):::$/s", $thing, $matches))
  3.         {
  4.            
  5.             // Determine if first tab is active or not
  6.             $output = $matches[1];
  7.             if (substr($output, 0 , 1) == '@') {
  8.                 $tabclass = 'activetab';
  9.                 $output = substr($output, 1);
  10.             }
  11.             else if ($tab) {
  12.                 $tabclass = 'inactivetab';
  13.             }
  14.            
  15.             // Fix links or other wiki markup inside tabs
  16.             $output = preg_replace_callback(
  17.             "/(".
  18.             "\[\[[^\[]*?\]\]|".                                                                 # forced link
  19.             "\b[a-z]+:\/\/\S+|".                                                                    # URL
  20.             "\b[A-ZÅÄÖÜ][A-Za-zÅÄÖÜßåäöü]+[:](?![=_])\S*\b|".                                      # InterWiki link
  21.             "\b([A-ZÅÄÖÜ]+[a-zßåäöü]+[A-Z0-9ÅÄÖÜ][A-Za-z0-9ÅÄÖÜßåäöü]*)\b|".                      # CamelWords
  22.             ")/ms", "wakka2callback", $output);
  23.  
  24.             $output = str_replace('::@', '</span><span class="activetab">', $output);
  25.             $output = str_replace('::', '</span><span class="inactivetab">', $output);
  26.            
  27.             return '<span class="tabline">&nbsp;&nbsp;&nbsp;</span><span class="' . $tabclass . '">' . $output . '</span><span class="tabline">&nbsp;&nbsp;&nbsp;</span>';
  28.            
  29.         }


  1. $text = preg_replace_callback(
  2.     "/(".
  3.     ":::.*?:::|".                                                                           # TabsMenu  <== just add this line
  4.     <snip>...


What do you think about this? You may include this in the standard code base if you like.

/AndreasHeintze


This modification can be made to the IncludeAction IncludeAction (include.php) so that a tab line like that at the top of this page can be included on all the tab pages, making maintenance easier. When adding or deleting tabs, modify the the included page with the tabs line vs. having to edit every tab page and set the active tab uniquely on each of these pages.

  1.                // TabsMenu auto detect active tab
  2.                 if (preg_match("/^:::(.*?):::$/s", $page["body"])) {
  3.                   print $this->Format( str_replace( '[[' . $this->tag, '@[[' . $this->tag, $page["body"] ) );
  4.                 }
  5.                 else {
  6.                   print $this->Format($page["body"]);
  7.                 }


This is a great enhancement for making good looking and well organized Wiki pages.

/LightMan

CodeContributions
There are no comments on this page.
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki