Wikipedia

Vorlage:TabMenu/Doku/TechnicalBackground

< Vorlage:TabMenu‎ | Doku
Dokumentation[Bearbeiten]
  Zweck und Überblick   Konzept und praktische Anwendung   Formatierung der Tabs   Technischer Hintergrund

Funktionsweise Bearbeiten

Diese Registerkartenvorlage kommt ohne eine if-Klausel oder eine switch-Anweisung aus. Sie funktioniert auch in MediaWiki-Umgebungen, die Extension ParserFunctions nicht unterstützen.

      Die Funktionsweise inkl. Beispielcode (zur Anzeige klicke rechts auf „Ausklappen“)

Die Funktionsweise der Basisvorlage Bearbeiten

Vorlage:TabMenu ist ein Wrapper, der zwei Aufgaben erfüllt:

  1. Er wertet die Parameter „Position“ und „Mode“ aus und leitet den Aufruf an die passende Vorlage weiter.
  2. Alle möglichen Parameter erhalten hier einen Standardwert, wenn der Vorlage kein anderer Wert übergeben wurde.

Hier der Source-Code: 

{{TabMenu/{{{Position|Global}}}/{{{Mode}}}
         | Name={{{Name|no_name}}}
         | TabWidth={{{TabWidth|1}}} | TabSpace={{{TabSpace|3}}} | TabHeight={{{TabHeight|25}}} | AdjustRight={{{AdjustRight|0}}}
         | PaStyleAdd=background-color:#{{{PaBgColor|C1CDCD}}};font-family:{{{PaFont|Arial}}};font-weight:{{{PaFontWeight|normal}}};
         | ActStyleAdd=background-color:#{{{ActBgColor|FFFFFF}}};font-family:{{{ActFont|Arial}}};font-weight:{{{ActFontWeight|bold}}};
         | ActBgColor={{{ActBgColor|FFFFFF}}}
         | Shadow={{{Shadow|On}}} | Rotate={{{Rotate|0}}} 
         | FrameAlign={{{FrameAlign|center}}} | FrameWidth={{{FrameWidth|100%}}}
         | Margin={{{Margin|5px}}} | Padding={{{Padding|10px}}} | Move={{{Move|0px,0px}}} }}

Der Ablauf anhand eines Beispiels Bearbeiten

In dem Beispiel aus dem Kapitel Konzept und praktische Anwendung steht der folgende vereinfachte Code unter der fiktiven Benutzerseite Benutzer:DeinBenutzername/Artikel. Das Menü soll dort die Artikel auflisten, die der Benutzer erstellt hat und/oder pflegt: 

         ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┐
         │                       Code auf der Benutzerseite (Benutzer:DeinBenutzername/Artikel)                      │
         ├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
         ○ ┌───────────────────────────────────────────────────────────────────────────────────────────────────────┐ ○
         │ │ <!-- BEGIN TABS --> {{Benutzer:DeinBenutzername/MyTabMenu | Tab2=Active | BgColor=FFFFFF }}           │ │
         ○ └───────────────────────────────────────────────────────────────────────────────────────────────┬───────┘ ○
         │ Inhalt der innerhalb des Tab-Rahmens angezeigt werden soll, z.B. eine Liste der Artikel ...     │         │
         ○ ┌─────────────────────────────────────────────────────┐                                         │         ○
         │ │ <!-- END OF TABS --> {{TabMenu | Mode=EndTabMenu }} │                                         │         │
         ○ └─────────────────────────┬───────────────────────────┘                                         │         ○
         └ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ │ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ │ ─ ○ ─ ○ ┘
                                     │                                                                     │
┌────────────────────────────────────┘                                                                     │
│                                                                                                          │
│        ┌─────────────────────────────────────────────────────────────────────────────────────────────────┴─────────┐
│        │               Die Vorlage Benutzer:DeinBenutzername/MyTabMenu enthält den folgenden Code:                 │
│        ├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│        ○ ┌───────────────────────────────────────────────────────────────────────────────────────────────────────┐ ○
│        │ │ {{TabMenu | Mode=BeginTemplate | Position={{{Position|Top}}} }}                                       │ │
│        ○ └─┬─────────────────────────────────────────────────────────────────────────────────────────────────────┘ ○
│        │   │ ┌───────────────────────────────────────────────────────────────────────────────────────────────────┐ │
│        ○   │ │ {{TabMenu | Mode={{{Tab1|Passive}}}FirstLBTab | Position={{{Position|Top}}} | PaBgColor=CAE1FF    │ ○
│        │   │ │           | ActBgColor={{{BgColor}}} | Name=[[Benutzer:DeinBenutzername|Benutzer]] }}             │ │
│        ○   │ └─┬─────────────────────────────────────────────────────────────────────────────────────────────────┘ ○
│        │   │   │ ┌───────────────────────────────────────────────────────────────────────────────────────────────┐ │
│        ○   │   │ │ {{TabMenu | Mode={{{Tab2|Passive}}}LastLMTab | Position={{{Position|Top}}} | PaBgColor=B4EEB4 │ ○
│        │   │   │ │           | ActBgColor={{{BgColor}}} | Name=[[Benutzer:DeinBenutzername/Artikel|Artikel]] }}  │ │
│        ○   │   │ └─┬─────────────────────────────────────────────────────────────────────────────────────────────┘ ○
│        │   │   │   │ ┌───────────────────────────────────────────────────────────────────────────────────────────┐ │
│        ○   │   │   │ │ {{TabMenu | Mode=EndTemplate | Position={{{Position|Top}}} | ActBgColor={{{BgColor}}} }}  │ ○
│        │   │   │   │ └─┬─────────────────────────────────────────────────────────────────────────────────────────┘ │
│        ○ ─ │ ─ │ ─ │ ─ │ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○ ─ ○
│            │   │   │   │
│            │   │   │   │
│            │   │   │   └──────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│            │   │   └─────────────────────────────────────────────────────────────────────────────────────────────────────────┐    │
│            │   └────────────────────────────────────────────────────────────────────────────────────────────────────────┐    │    │
│            │                                                                                                            │    │    │
│            │                                                                                                            │    │    │
│        ┌───┴───────────────────────────────────────────────────────────────────────────────────────────────────────┐    │    │    │
│        │                           TabMenu ruft Vorlage:TabMenu/Top/BeginTemplate auf                              │    │    │    │
│        ├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤    │    │    │
│        │ Es wird ein doppelter transparenter Rahmen angelegt, der sich um sämtliche Objekte innerhalb des TabMenüs │    │    │    │
│        │ legt. Er dient dazu, globale Einstellungen vornehmen zu können, die sich auf alle Onjekte auswirken, wie  │    │    │    │
│        │ die TabMenü-Breite, die Rotation, etc.                                                                    │    │    │    │
│        │ Der Rahmen ist doppelt, weil sich über diesen Weg zwei Transforms-Anweisungen in Kombination verwenden    │    │    │    │
│        │ lassen (hier Rotate und Move(=translate)) und weil auch weitere kleinere technische Herausforderungen da- │    │    │    │
│        │ mit gelöst werden konnten.                                                                                │    │    │    │
│        │ Danach wird innerhalb dieser Vorlage das erste Objekt angelegt, eine Tabelle, die die obere Zeile, die    │    │    │    │
│        │ Registerkarten (Tabs) zeichnen soll. Jeder Tab wird durch je eine Spalte dieser Tabelle definiert. Das    │    │    │    │
│        │ passiert jedoch nicht innerhalb dieser Vorlage; die Definition der Tabs wird vielmehr durch die folgenden │    │    │    │
│        │ beiden Vorlagen vorgenommen. Diese Vorlagen machen also nichts anderes, als die Spalten der hier geöffne- │    │    │    │
│        │ ten Tabelle zu füllen.                                                                                    │    │    │    │
│        └───────────────────────────────────────────────────────────────────────────────────────────────────────────┘    │    │    │
│                                                                                                                         │    │    │
│        ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┐    │    │    │
│        │        TabMenu ruft Vorlage:TabMenu/Top/PassiveFirstLBTab auf und übergibt ihr die obigen Parameter       ├────┘    │    │
│        ├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤         │    │
│        │ Diese Vorlage definiert den ersten Tab. In dem Code-Beispiel von oben ist das der Tab "Benutzer":         │         │    │
│        │                 ┌─────────────────────────────────────────────────────────────────────────────────────────┘         │    │
│        ├ ─ ─ ─ ─ ─ ─ ─ ─ ┤   ┌─────────────────────────────────────────────────────────────────────────────────────┐         │    │
│        │    ┌──────────┐ │   │ ┌─────────┐                                                                         │         │    │
│        │    │ Benutzer │ │   │ │ Artikel │                                                                         │         │    │
│        │  ┌─┴──────────┴───────┘         └──────────────────────────────────────────────────────────────────────┐  │         │    │
│        │                 │   │                                                                                     │         │    │
│        └─────────────────┘   ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤         │    │
│        ┌─────────────────────┘                                                                                     │         │    │
│        │         TabMenu ruft Vorlage:TabMenu/Top/ActiveLastLMTab auf und übergibt ihr die obigen Parameter        ├─────────┘    │
│        ├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤              │
│        │ Diese Vorlage definiert den zweiten Tab. In dem Code-Beispiel von oben ist das der Tab "Artikel". Es wird │              │
│        │ hier die Vorlage .../Active... und nicht .../Passive... verwendet, weil im Code ganz oben beim Aufruf des │              │
│        │ Menüs Tab2 auf Active gesetzt wurde in Form von {{Benutzer:DeinBenutzername/MyTabMenu | Tab2=Active ...}}.│              │
│        │ Das wiederum bewirkt, dass der zweite Tab als aktiver ("angeklickter") Tab definiert wird, wobei er als   │              │
│        │ letzter Tab das Menü linksbündig abschließt (gemäß ...LastLMTab).                                         │              │
│        └───────────────────────────────────────────────────────────────────────────────────────────────────────────┘              │
│                                                                                                                                   │
│        ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┐              │
│        │           TabMenu ruft Vorlage:TabMenu/Top/EndTemplate auf und übergibt ihr die obigen Parameter          ├──────────────┘
│        ├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│        │ Es wird die Tabelle für die Tabs geschlossen. Die Tabs werden somit jetzt gezeichnet.                     │
│        │ Danach wird unmittelbar darunter eine neue Tabelle geöffnet, die am Rand links und rechts einen Rahmen    │
│        │ zeichnet. Die Tabelle wird erst in der nächsten Vorlage (EndTabMenu) geschlossen, sodass sämtlicher da-   │
│        │ zwischen liegender Inhalt (der Seiteninhalt) von diesem Rahmen umgeben ist.                               │
│        └───────────────────────────────────────────────────────────────────────────────────────────────────────────┘
│
│     Es wird nun der Inhalt geschrieben, der innerhalb des Tab-Rahmens angezeigt werden soll, z.B. eine Liste der Artikel ... 
│
│        ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┐
└────────┤                             TabMenu ruft Vorlage:TabMenu/Global/EndTabMenu auf                            │
         ├───────────────────────────────────────────────────────────────────────────────────────────────────────────┤
         │ Die Tabelle für den Seiteninhalt wird geschlossen.                                                        │
         │ Es wird eine neue Tabelle geöffnet, die den abschließenden unteren Strich zeichnet. Diese Tabelle wird    │
         │ nun wieder geschlossen.                                                                                   │
         │ Abschließend wird der doppelte transparente Rahmen aus BeginTemplate geschlossen, der die globalen Ein-   │
         │ stellungen vornimmt (wie die Breite des TabMenüs, die Rotation, etc).                                     │
         └───────────────────────────────────────────────────────────────────────────────────────────────────────────┘

Die Ausgabe auf der Benutzerseite Bearbeiten

  Benutzer   Artikel  

Es wird nun der Inhalt geschrieben, der innerhalb des Tab-Rahmens angezeigt werden soll, z.B. eine Liste der Artikel ...

Der dazu gehörende aufgeschlüsselte Code Bearbeiten

Hinweis: Zeilenumbrüche im style-Feld sind innerhalb von Tabellen nicht erlaubt. Da die Anweisungen darin zum Teil sehr zahlreich sind, sind sie zur besseren Lesbarkeit des Codes jedoch notwendig. Der folgende Code ist also nicht lauffähig. Er funktioniert erst, wenn die Zeilenumbrüche wieder entfernt werden.

In dem Kapitel „Die Ausgabe auf der Benutzerseite“ befindet sich ein lauffähiger Code. Wenn es nur darum geht, die Funktionsweise zu verstehen, ist der folgende Code der richtige; abgesehen von der Formatierung unterscheidet er sich nicht von dem lauffähigen Code. 

<!--
         ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┐
         │                  Code der aus Vorlage:TabMenu/Top/BeginTemplate heraus erzeugt wird:                      │
         └───────────────────────────────────────────────────────────────────────────────────────────────────────────┘
Den ersten globalen Rahmen anlegen: -->
<div align="{{{FrameAlign|center}}}" style="
  background: transparent;
  padding: 0px;
  /* Die Vorlage {{TabMenu/Global/Rotate | Rotate={{{Rotate|0}}} }} aufgeschlüsselt: */
    -moz-transform:    rotate({{{Rotate|0}}}deg);  /* Mozilla */
    -webkit-transform: rotate({{{Rotate|0}}}deg);  /* Safari  */
    -ms-transform:     rotate({{{Rotate|0}}}deg);  /* IE 9    */
    transform:         rotate({{{Rotate|0}}}deg);
  /* Die Vorlage {{TabMenu/Global/FirstMargin_{{{FrameAlign|center}}} | Margin={{{Margin|5px}}} }} aufgeschlüsselt: */
    margin: {{{Margin|5px}}};
">
<!-- Den zweiten globalen Rahmen anlegen: -->
{| align="{{{FrameAlign|center}}}" width="{{{FrameWidth|100%}}}" style="
  background: transparent;
  padding: 0px;
  /* Die Vorlage {{TabMenu/Global/Move | Move={{{Move|0px,0px}}} }} aufgeschlüsselt: */
    -moz-transform:    translate({{{Move|0px,0px}}});  /* Mozilla */
    -webkit-transform: translate({{{Move|0px,0px}}});  /* Safari  */
    -ms-transform:     translate({{{Move|0px,0px}}});  /* IE 9    */
    transform:         translate({{{Move|0px,0px}}});
  /* Die Vorlage {{TabMenu/Global/SecondMargin_{{{FrameAlign|center}}} | Margin={{{Margin|5px}}} }} aufgeschlüsselt: */
    margin: 0px;
"
|-
|
<!-- Die Tabelle für die Tabs öffnen: -->
{| width="100%" border="0" cellspacing="0" cellpadding="1" style="background: transparent;"
<!--
         ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┐
         │                 Code der aus Vorlage:TabMenu/Top/PassiveFirstLBTab heraus erzeugt wird:                   │
         └───────────────────────────────────────────────────────────────────────────────────────────────────────────┘
Die erste Spalte (=den ersten Tab) der obigen Tabelle füllen: Schritt 1 = den führenden Unterstrich definieren... -->
| width="{{{TabSpace|3}}}" style="
  border-bottom: solid 1px #000000;
" | &nbsp;
<!-- ...Schritt 2 = den (hier passiven) Tab definieren -->
| width="{{{TabWidth|1}}}" height="{{{TabHeight|25}}}" style="
  padding: 0em 1em 0em 1em;
  border: solid 1px #000000;
  border-radius: 6px 6px 0px 0px;
  text-align:center;
  /* Der Parameter {{{PaStyleAdd}}} aufgeschlüsselt: */
    background-color: #{{{PaBgColor|C1CDCD}}};
    font-family: {{{PaFont|Arial}}};
    font-weight: {{{PaFontWeight|normal}}};
" | [[Benutzer:DeinBenutzername|Benutzer]]
<!--
         ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┐
         │                  Code der aus Vorlage:TabMenu/Top/ActiveLastLMTab heraus erzeugt wird:                    │
         └───────────────────────────────────────────────────────────────────────────────────────────────────────────┘
Die zweite Spalte (=den zweiten Tab) der obigen Tabelle füllen: Schritt 1 = den führenden Unterstrich definieren... -->
| width="{{{TabSpace|3}}}" style="
  border-bottom:1px solid #000000;
" | &nbsp;
<!-- ...Schritt 2 = den (hier aktiven) Tab definieren -->
| width="{{{TabWidth|1}}}" height="{{{TabHeight|25}}}" style="
  padding: 0em 1em 0em 1em;
  border-left:  solid 1px #000000;
  border-top:   solid 1px #000000;
  border-right: solid 1px #000000;
  border-radius: 6px 6px 0px 0px;
  text-align:center;
  /* Der Parameter {{{ActStyleAdd}}} aufgeschlüsselt: */
    background-color: #{{{ActBgColor|FFFFFF}}};
    font-family: {{{ActFont|Arial}}};
    font-weight: {{{ActFontWeight|bold}}};
" | [[Benutzer:DeinBenutzername/Artikel|Artikel]]
<!-- Es wird nun der abschließende Unterstrich für die Tab-Linksverschiebung gezeichnet: -->
| width="{{{AdjustRight|0}}}" style="border-bottom:solid 1px #000000;" | &nbsp;
<!--
         ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┐
         │                   Code der aus Vorlage:TabMenu/Top/EndTemplate heraus erzeugt wird:                       │
         └───────────────────────────────────────────────────────────────────────────────────────────────────────────┘
Die obige (Tab-)Tabelle schießen (=Tabs jetzt zeichnen)... -->
|}
<!-- ...und direkt darunter eine Tabelle für den Seiteninhalt öffnen, mit sichtbarem Rahmen links und rechts: --> 
{| width="100%" cellspacing="5" style="
  background-color:#{{{ActBgColor|FFFFFF}}};
  border-left:  solid 1px #000000;
  border-right: solid 1px #000000;
  padding:{{{Padding|10px}}};
  /* Die Vorlage {{TabMenu/Global/Shadow{{{Shadow|On}}} }} aufgeschlüsselt: */
    -webkit-box-shadow: 0px 0px 16px #808080;
    -moz-box-shadow:    0px 0px 16px #808080;
    box-shadow:         0px 0px 16px #808080;
" 
|

Es wird nun der Inhalt geschrieben, der innerhalb des Tab-Rahmens angezeigt werden soll, z.B. eine Liste der Artikel ... 

<!--
         ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┐
         │                  Code der aus Vorlage:TabMenu/Global/EndTabMenu heraus erzeugt wird:                      │
         └───────────────────────────────────────────────────────────────────────────────────────────────────────────┘
Die Tabelle für den Seiteninhalt nun schließen... -->
|}
<!-- ...und den abschließenden unteren Strich zeichnen: -->
{|width="100%" style="
  background: transparent;
  border-top: 1px solid #000000;
"
|}
<!-- Abschließend den globalen doppelten Rahmen schließen: -->
|}
</div>

Die TabMenu-Vorlage setzt sich aus den folgenden Seiten zusammen Bearbeiten

      Subtemplates
Um das TabMenü in einer anderen Wiki-Umgebung nutzen zu können, müssen die folgenden Unterseiten der Vorlage dorthin kopiert werden:
Wrapper:
Vorlage:TabMenu Wertet die Parameter „Position“ und „Mode“ aus und leitet dann den Aufruf an die passende Vorlage weiter.
Teilvorlagen, Ausrichtung „Tabs oben“:
Vorlage:TabMenu/Top/BeginTemplate Leistet die Vorarbeiten für „Tabs oben“. Setzt seit Version 2.x auch Rotate und Move um.
Vorlage:TabMenu/Top/EndTemplate Schließt die Definitionen der Tabs ab und erstellt die Umgebung für den Seiteninhalt unterhalb des TabMenüs. Setzt seit Version 2.x auch Shadow um.
Vorlage:TabMenu/Top/Active Definiert die Darstellung eines aktiven (angeklickten) Tabs.
Vorlage:TabMenu/Top/Passive Definiert die Darstellung eines passiven Tabs.
Vorlage:TabMenu/Top/ActiveFirstLBTab Definiert die Darstellung des ersten Tabs als aktiven (angeklickten) Tab, wenn sämtliche Tabs links oder als Block ausgerichtet sein sollen. Bei einem mittig oder rechts ausgerichteten TabMenü entfällt der FirstLBTab-Zusatz.
Vorlage:TabMenu/Top/PassiveFirstLBTab Definiert die Darstellung des ersten Tabs als passiven Tab, wenn sämtliche Tabs links oder als Block ausgerichtet sein sollen. Bei einem mittig oder rechts ausgerichteten TabMenü entfällt der FirstLBTab-Zusatz.
Vorlage:TabMenu/Top/ActiveLastRBTab Definiert die Darstellung des letzten Tabs als aktiven (angeklickten) Tab, wenn sämtliche Tabs rechts oder als Block ausgerichtet sein sollen.
Vorlage:TabMenu/Top/PassiveLastRBTab Definiert die Darstellung des letzten Tabs als pasiven Tab, wenn sämtliche Tabs rechts oder als Block ausgerichtet sein sollen.
Vorlage:TabMenu/Top/ActiveLastLMTab Definiert die Darstellung des letzten Tabs als aktiven (angeklickten) Tab, wenn sämtliche Tabs links oder mittig ausgerichtet sein sollen.
Vorlage:TabMenu/Top/PassiveLastLMTab Definiert die Darstellung des letzten Tabs als passiven Tab, wenn sämtliche Tabs links oder mittig ausgerichtet sein sollen.
Vorlage:TabMenu/Top/FinishMenu Wird als Abschluss benötigt, wenn nur ein einziger Tab links oder mittig verwendet werden soll - siehe unter den Dokumentationsseiten die Beispielvorlagen 1L und 1C.
Teilvorlagen, Ausrichtung „Tabs unten“:
Vorlage:TabMenu/Bottom/BeginTemplate Wird unter dem Seiteninhalt nach einem „Tabs oben“-Menü oder nach Vorlage:TabMenu/Global/BeginTabMenu aufgerufen und bereitet die Definitionen der unteren Tabs vor.
Vorlage:TabMenu/Bottom/EndTemplate Schließt die unteren Tabs und damit das komplette TabMenü ab.
Vorlage:TabMenu/Bottom/Active Definiert die Darstellung eines aktiven (angeklickten) Tabs.
Vorlage:TabMenu/Bottom/Passive Definiert die Darstellung eines passiven Tabs.
  ├─► Vorlage:TabMenu/Bottom/AddPaTopBorderShadowOn Ist Parameter Shadow=On, wird in Bottom/Passiv der obere Tab-Strich im Modus groove 2px gezeichnet.
  └─► Vorlage:TabMenu/Bottom/AddPaTopBorderShadowOff Ist Parameter Shadow=Off, wird in Bottom/Passiv der obere Tab-Strich im Modus solid 1px gezeichnet.
Vorlage:TabMenu/Bottom/ActiveFirstLBTab Definiert die Darstellung des ersten Tabs als aktiven (angeklickten) Tab, wenn sämtliche Tabs links oder als Block ausgerichtet sein sollen. Bei einem mittig oder rechts ausgerichteten TabMenü entfällt der FirstLBTab-Zusatz.
Vorlage:TabMenu/Bottom/PassiveFirstLBTab Definiert die Darstellung des ersten Tabs als passiven Tab, wenn sämtliche Tabs links oder als Block ausgerichtet sein sollen. Bei einem mittig oder rechts ausgerichteten TabMenü entfällt der FirstLBTab-Zusatz.
Vorlage:TabMenu/Bottom/ActiveLastRBTab Definiert die Darstellung des letzten Tabs als aktiven (angeklickten) Tab, wenn sämtliche Tabs rechts oder als Block ausgerichtet sein sollen.
Vorlage:TabMenu/Bottom/PassiveLastRBTab Definiert die Darstellung des letzten Tabs als pasiven Tab, wenn sämtliche Tabs rechts oder als Block ausgerichtet sein sollen.
Vorlage:TabMenu/Bottom/ActiveLastLMTab Definiert die Darstellung des letzten Tabs als aktiven (angeklickten) Tab, wenn sämtliche Tabs links oder mittig ausgerichtet sein sollen.
Vorlage:TabMenu/Bottom/PassiveLastLMTab Definiert die Darstellung des letzten Tabs als passiven Tab, wenn sämtliche Tabs links oder mittig ausgerichtet sein sollen.
Vorlage:TabMenu/Bottom/FinishMenu Wird als Abschluss benötigt, wenn nur ein einziger Tab links oder mittig verwendet werden soll - siehe unter den Dokumentationsseiten die Beispielvorlagen 1L und 1C.
Globale TabMenü-Vorlagen:
Vorlage:TabMenu/Global/BeginTabMenu Leistet die Vorarbeiten für „Tabs unten“, wenn diese mit keinem „Tabs oben“-Menü kombiniert werden sollen. Setzt seit Version 2.x auch Shadow und Rotate sowie Move um.
  ├─► Vorlage:TabMenu/Global/ShadowOn Ist Parameter Shadow=On, setzt diese Vorlage die Abbildung des Schattens um (CodeInjection per style="... {{Shadow{{{On}}}}} ..."); wird in „Vorlage:TabMenu/Top/EndTemplate“ und „Vorlage:TabMenu/Global/BeginTabMenu“ verwendet.
  ├─► Vorlage:TabMenu/Global/ShadowOff Ist Parameter Shadow=Off, wird diese leere Vorlage verwendet, statt „Vorlage:TabMenu/Global/ShadowOn“.
  ├─► Vorlage:TabMenu/Global/Rotate Zentrale Stelle für den Rotate-Code, um die Rotation des TabMenüs umzusetzen; wird in „Vorlage:TabMenu/Top/BeginTemplate“ und „Vorlage:TabMenu/Global/BeginTabMenu“ verwendet.
  ├─► Vorlage:TabMenu/Global/Move Zentrale Stelle für den Move-Code, um das TabMenü in seiner Position zu verschieben; wird in „Vorlage:TabMenu/Top/BeginTemplate“ und „Vorlage:TabMenu/Global/BeginTabMenu“ verwendet.
  ├─► Vorlage:TabMenu/Global/FirstMargin_center Wird in „Vorlage:TabMenu/Top/BeginTemplate“ und „Vorlage:TabMenu/Global/BeginTabMenu“ genutzt. Darin wird ein doppelter transparenter Rahmen angelegt, der sich um sämtliche Objekte innerhalb des TabMenüs legt. Er dient dazu, globale Einstellungen vornehmen zu können, die sich auf alle Onjekte auswirken, wie die TabMenü-Breite, die Rotation, etc. Wenn FrameAlign=center, dann wird Margin im ersten Rahmen (div-Block) umgesetzt, sonst innerhalb des zweiten Rahmens (der Gesamttabelle), da es sonst Fehler in der Darstellung gibt. Diese und die fünf folgenden Vorlagen dienen dazu, das gewünschte Verhalten umzusetzen.
  ├─► Vorlage:TabMenu/Global/FirstMargin_left Siehe „Vorlage:TabMenu/Global/FirstMargin_center“.
  ├─► Vorlage:TabMenu/Global/FirstMargin_right Siehe „Vorlage:TabMenu/Global/FirstMargin_center“.
  ├─► Vorlage:TabMenu/Global/SecondMargin_center Siehe „Vorlage:TabMenu/Global/FirstMargin_center“.
  ├─► Vorlage:TabMenu/Global/SecondMargin_left Siehe „Vorlage:TabMenu/Global/FirstMargin_center“.
  └─► Vorlage:TabMenu/Global/SecondMargin_right Siehe „Vorlage:TabMenu/Global/FirstMargin_center“.
Vorlage:TabMenu/Global/EndTabMenu Schließt ein „Tabs oben“-Menü ab, wenn es mit keinem „Tabs unten“-Menü kombiniert werden soll.
Werkzeuge:
Vorlage:TabMenu/Tools/LinkView Gibt eine Zeile aus mit Links auf die eigenen TabMenüs in Form von „Link zum TabMenü: [oben], [unten], [TabMenü-Hilfe]“.
Vorlage:TabMenu/Tools/ShowOffBegin Wird von der Vorlage LinkView verwendet, um einen Eintrag auszublenden.
Vorlage:TabMenu/Tools/ShowOffEnd Wird von der Vorlage LinkView verwendet, um einen Eintrag auszublenden.
Vorlage:TabMenu/Tools/ShowOnBegin Wird von der Vorlage LinkView verwendet, um einen Eintrag einzublenden.
Vorlage:TabMenu/Tools/ShowOnEnd Wird von der Vorlage LinkView verwendet, um einen Eintrag einzublenden.
      Dokumentationsseiten
Die Dokumentation setzt sich aus 10 Hilfeseiten und zahlreichen Beispielvorlagen zusammen:
Hilfeseiten:
Vorlage:TabMenu/Doku Tab „Zweck und Überblick“
Vorlage:TabMenu/Doku/TabConcept Tab „Konzept und praktische Anwendung“
Vorlage:TabMenu/Doku/TabFmtInfo Tab „Formatierung der Tabs“, SubTab „Tabs oben“
  ├─► Vorlage:TabMenu/Doku/TabFmtInfo/Bottom Tab „Formatierung der Tabs“, SubTab „Tabs unten“
  ├─► Vorlage:TabMenu/Doku/TabFmtInfo/TopAndBottom Tab „Formatierung der Tabs“, SubTab „Tabs oben und unten“
  ├─► Vorlage:TabMenu/Doku/TabFmtInfo/Embedded Tab „Formatierung der Tabs“, SubTab „Menü einbetten“
  ├─► Vorlage:TabMenu/Doku/TabFmtInfo/Hacks Tab „Formatierung der Tabs“, SubTab „Hacks“
  ├─► Vorlage:TabMenu/Doku/TabFmtInfo/Troubleshooting Tab „Formatierung der Tabs“, SubTab „Fehlersuche“
  └─► Vorlage:TabMenu/Doku/TabFmtInfo/Parameters Tab „Formatierung der Tabs“, SubTab „Parameter“
Vorlage:TabMenu/Doku/TechnicalBackground Tab „Technischer Hintergrund“
Basisvorlagen:
Vorlage:TabMenu/Doku/Version Versionsnummer der TabMenu-Vorlage, unterteilt in aa.bb.cc: aa=Konzeptänderng/-Erweiterung, bb=neue Funktionen, cc=Fehlerkorrekturen.
Vorlage:TabMenu/Doku/TMT/Main01 Tabs "Allgemeines", "Formatierung der Tabs" und "technischer Hintergrund".
Vorlage:TabMenu/Doku/TMT/MainTabFmt01 SubTabs "Format": "Tabs oben", "Tabs unten", "Tabs oben und unten", "Menü einbetten", "Hacks", "Fehlersuche" und "Parameterübersicht".
Beispielvorlagen:
Vorlage:TabMenu/Doku/TMT/Concept01 Beispielvorlage mit Tabs "Benutzer" und "Artikel" für "Konzept und praktische Anwendung".
Vorlage:TabMenu/Doku/TMT/FormatL01 Ausgangsvorlage, alle Tabs: TabWidth=1; LastLMTab.
Vorlage:TabMenu/Doku/TMT/FormatL02 AdjustRight=75; Problem: einzig der IE 6 stellt den Tabnamen nicht zentriert dar; seit IE 7 ist das kein Problem mehr.
Vorlage:TabMenu/Doku/TMT/FormatL03 AdjustRight=50%; Problem: siehe TMT_FormatL02.
Vorlage:TabMenu/Doku/TMT/FormatL04 Alle Tabs: TabWidth=10%; AdjustRight=50%; Name auch im IE 6 zentriert.
Vorlage:TabMenu/Doku/TMT/FormatL05 Tab3: TabWidth=20%.
Vorlage:TabMenu/Doku/TMT/FormatL06 Tab3 und Tab5: TabSpace=30.
Vorlage:TabMenu/Doku/TMT/FormatL07 Wie TMT_FormatL05, jedoch Tab5: TabSpace=50.
Vorlage:TabMenu/Doku/TMT/FormatL08 Alle Tabs: TabWidth=0 => automatische Tab-Breite; Name auch im IE 6 zentriert.
Vorlage:TabMenu/Doku/TMT/FormatL09 Wie Ausgangsvorlage, jedoch Tab4: TabSpace=50, Tab5: TabWidth=20%.
Vorlage:TabMenu/Doku/TMT/FormatLR01 Alle Tabs: TabWidth=1; Tab4: TabSpace=0; LastRBTab.
Vorlage:TabMenu/Doku/TMT/FormatR01 Kein FirstLBTab; alle Tabs: TabWidth=1; Tab1: TabSpace=0, LastRBTab.
Vorlage:TabMenu/Doku/TMT/FormatM01 Wie TMT_FormatR01, jedoch mit LastLMTab statt LastRBTab.
Vorlage:TabMenu/Doku/TMT/FormatB01 Wie TMT_FormatL01, jedoch mit LastRBTab statt LastLMTab; Problem: siehe TMT_FormatL02.
Vorlage:TabMenu/Doku/TMT/FormatB01D Wie TMT_FormatB01, jedoch mit doppelter Höhe der Tabs per TabHeight=42.
Vorlage:TabMenu/Doku/TMT/FormatB01D2 Wie TMT_FormatB01, jedoch mit doppelter Höhe der Tabs durch 2 Leerzeilen - Hack.
Vorlage:TabMenu/Doku/TMT/FormatB02 Wie TMT_FormatB01, jedoch alle Tabs: TabWidth=20%; Name auch im IE 6 zentriert.
Vorlage:TabMenu/Doku/TMT/Top01 Tab1 und 2, links oben.
Vorlage:TabMenu/Doku/TMT/Bottom01 Tab3 bis 5, rechts unten.
Vorlage:TabMenu/Doku/TMT/Top02 Tab1 bis 3, Block oben.
Vorlage:TabMenu/Doku/TMT/Bottom02 Tab4 und 5, Block unten.
Vorlage:TabMenu/Doku/TMT/1L Nur ein Tab, links - sinnvoll für einen einzigen zusätzlichen Tab auf der gegenüberliegenden Seite eines anderen TabMenüs.
Vorlage:TabMenu/Doku/TMT/1R Nur ein Tab, rechts - sinnvoll für einen einzigen zusätzlichen Tab auf der gegenüberliegenden Seite eines anderen TabMenüs.
Vorlage:TabMenu/Doku/TMT/1C Nur ein Tab, mitttig - sinnvoll für einen einzigen zusätzlichen Tab auf der gegenüberliegenden Seite eines anderen TabMenüs.
Vorlage:TabMenu/Doku/TMT/1CF1 Nur ein Tab, mittig + 25% rechts - sinnvoll für einen einzigen zusätzlichen Tab auf der gegenüberliegenden Seite eines anderen TabMenüs.
Vorlage:TabMenu/Doku/TMT/1CF2 Nur ein Tab, mitttig + 25% links - sinnvoll für einen einzigen zusätzlichen Tab auf der gegenüberliegenden Seite eines anderen TabMenüs.
Zentrale Hinweisvorlagen:
Vorlage:TabMenu/Global/TemplateHelpInfo Kurzhilfe, die auf den Seiten der selbst erstellten Vorlagen angezeigt wird.
Vorlage:TabMenu/Doku/TemplateShowCodeInfo Hinweistext, der unter jedem Code der Beispielvorlagen angezeigt wird.

Wikipedia-interne Vorlagen Bearbeiten

Die folgenden Wikipedia-Vorlagen werden innerhalb der TabMenu-Vorlagen verwendet:

Vorlage:Dokumentation/ruler Bearbeiten

Die Vorlage:Dokumentation/ruler setzt einen einheitlichen Strich ober- bzw. unterhalb der Dokumentation. Alternativ ließe sich der Strich auch wie folgt setzen: 

<hr class="rulerdocumentation hintergrundfarbe6" style="height:.7ex; margin:1em 0;">

Vorlage:Überschriftensimulation 3 Bearbeiten

Die Vorlage:Überschriftensimulation bildet innerhalb der TabMenu-Vorlagen die Überschrift „Dokumentation [Bearbeiten]“ ab. Allgemein Simuliert sie in Diskussionseiten eine Überschrift, die nicht im Inhaltsverzeichnis erscheinen soll. Alternativ ließe sich die Vorlage wie folgt nachbilden: 

<div class="Vorlage_Überschriftensimulation_3" style="font-size: 1.2em; font-weight: bold; margin-top: .3em; margin-bottom: 0em; overflow: hidden; padding: 0;">{{{1}}}</div>

bzw. wie folgt ersetzen 

<div class="Vorlage_Überschriftensimulation_3" style="font-size: 1.2em; font-weight: bold; margin-top: .3em; margin-bottom: 0em; overflow: hidden; padding: 0;">Dokumentation<span class="mw-editsection plainlinks">[[{{fullurl:{{SUBJECTPAGENAME}}/Doku|action=edit}} {{int:Editsection}}]]</span></div>
  Zweck und Überblick   Konzept und praktische Anwendung   Formatierung der Tabs   Technischer Hintergrund


Abgerufen von „https://de.wikipedia.org/w/index.php?title=Vorlage:TabMenu/Doku/TechnicalBackground&oldid=171420179“