Funktionsweise
Diese Registerkartenvorlage kommt ohne eine if-Klausel oder eine switch-Anweisung aus. Sie funktioniert auch in MediaWiki-Umgebungen, die Extension ParserFunctions nicht unterstützen.
Funktionsweise anhand eines Beispiels:
Die Funktionsweise der Basisvorlage
Vorlage:TabMenu ist ein Wrapper, der zwei Aufgaben erfüllt:
- Er wertet die Parameter „Position“ und „Mode“ aus und leitet den Aufruf an die passende Vorlage weiter.
- 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|Off}}} | Rotate={{{Rotate|0}}}
| FrameAlign={{{FrameAlign|center}}} | FrameWidth={{{FrameWidth|100%}}}
| Margin={{{Margin|5px}}} | Padding={{{Padding|10px}}} | Move={{{Move|0px,0px}}} }}
Der Ablauf anhand eines Beispiels
In diesem 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}}}FirstTab | Position={{{Position|Top}}} | PaBgColor=CAE1FF │ ○
│ │ │ │ | ActBgColor={{{BgColor}}} | Name=[[Benutzer:DeinBenutzername|Benutzer]] }} │ │
│ ○ │ └─┬─────────────────────────────────────────────────────────────────────────────────────────────────┘ ○
│ │ │ │ ┌───────────────────────────────────────────────────────────────────────────────────────────────┐ │
│ ○ │ │ │ {{TabMenu | Mode={{{Tab2|Passive}}}LastLTab | 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/PassiveFirstTab 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/ActiveLastLTab 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 ...PassivLastLTab verwendet, weil im Code ganz oben Tab2=Active ge- │ │
│ │ setzt wurde. 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äß ...LastLTab). │ │
│ └───────────────────────────────────────────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┐ │
│ │ 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 und der dazu gehörende aufgeschlüsselte Code
<!--
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Code der aus Vorlage:TabMenu/Top/BeginTemplate heraus erzeugt wird: │
└───────────────────────────────────────────────────────────────────────────────────────────────────────────┘
Den ersten globalen Rahmen anlegen: -->
<div align="{{{FrameAlign|center}}}" style=" <!-- Hinweis: Zeilenumbrüche sind hier nicht erlaubt, aber da die Anweisungen
zahlreich sind, sind sie (auch weiter unten) zur besseren Les-
barkeit des Codes an dieser Stelle notwendig. Daher der Weg über
die Kommentarfunktion, der nur innerhalb dieses Beispiels (nicht
aber innerhalb der Vorlage) verwendet wird:
--> 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/PassiveFirstTab heraus erzeugt wird: │
└───────────────────────────────────────────────────────────────────────────────────────────────────────────┘
Die erste Spalte (=den ersten Tab) der obigen Tabelle füllen: Schritt 1 = der führende Unterstrich... -->
| width="{{{TabSpace|3}}}" style=" <!--
--> border-bottom: solid 1px #000000; <!--
--> " |
<!-- ...Schritt 2 = den (hier passiven) Tab definieren -->
| width="{{{TabWidth|0}}}" height="{{{TabHeight|0}}}" style=" <!--
--> padding: 0em 1em 0em 1em; <!--
--> border-left:solid 1px #000000; <!--
--> border-top:solid 1px #000000; <!--
--> border-right:solid 1px #000000; <!--
--> border-bottom: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
<!--
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Code der aus Vorlage:TabMenu/Top/ActiveLastLTab heraus erzeugt wird: │
└───────────────────────────────────────────────────────────────────────────────────────────────────────────┘
Die zweite Spalte (=den zweiten Tab) der obigen Tabelle füllen: Schritt 1 = der führende Unterstrich... -->
| width="{{{TabSpace|3}}}" style=" <!--
--> border-bottom:1px solid #000000; <!--
--> " |
<!-- ...Schritt 2 = den (hier aktiven) Tab definieren -->
| width="{{{TabWidth|0}}}" height="{{{TabHeight|0}}}" 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}}}; <!--
--> " | Artikel
<!--
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ 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 folgt der Seitenhinhalt (in dem Beispiel ist das eine Liste der Artikel, die der Benutzer pflegt).
<!--
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ 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>
Ziel und Verwendung
Die Herausforderung während der Entwicklung bestand darin, eine Vorlage für ein Registerkartenmenü zu erstellen, die ohne Extension ParserFunctions auskommt. Das Ziel dieser Vorlage ist nicht Effizienz. Sie soll die spzielle Herangehensweise verdeutlichen und einige Möglichkeiten aufzeigen, die sich daraus ergeben.
Um das TabMenü in einer anderen Wiki-Umgebung nutzen zu können, müssen sämtliche Seiten der Vorlage dorthin kopiert werden.
Wrapper:
Teilvorlagen, Ausrichtung "Tabs oben":
Teilvorlagen, Ausrichtung "Tabs unten":
Globale TabMenü-Vorlagen:
Die Dokumentation umfasst die folgenden Seiten
Dokumentationsseiten:
Basisvorlagen:
Beispielvorlagen:
- 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:
Wikipedia-interne Vorlagen
Die folgenden Wikipedia-Vorlagen werden innerhalb der Vorlagen von TabMenu verwendet:
Vorlage:Dokumentation/ruler
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
Die Vorlage:Überschriftensimulation 3 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>
|
