Vorlage:TabMenu/Doku/TabFmtInfo/FineTuning

aus Wikipedia, der freien Enzyklopädie
Zur Navigation springen Zur Suche springen

Dokumentation[Bearbeiten]
  Zweck und Überblick   Konzept und praktische Anwendung   Formatierung der Tabs   Technischer Hintergrund  
  Tabs oben   Tabs unten   Tabs oben und unten   Menüs verschachteln   Feineinstellungen   Hacks   Fehlersuche   Parameter  

Unter „Konzept und praktische Anwendung“ steht, wie Du Dein eigenes TabMenü erstellst; Code-Beispiele liegen unter „Tabs oben“. Darin wird Dir auch gezeigt, wie Du Dein Menü auf den dazu gehörenden Seiten einbinden kannst.

In diesem Kapitel werden die Feineinstellungen dazu beschrieben, wie der Schatten, die Rotation, die Anpassung der Breite Deines Menüs sowie seine Ausrichtung und die Konfiguration des inneren und äußeren Abstands zum Menürahmen.

Schatten und Rotation

[Quelltext bearbeiten]

Der Parameter

Shadow = On

schaltet den Schatten an, wohingegen

Shadow = Off

den Schatten ausschaltet. Siehe auch unter Hack: Im aktiven Tab unten einen Schatten erzeugen.

Der Parameter

Rotate = 0

schaltet die Rotation aus. Positive Werte lassen Dein Menü nach rechts kippen; nagative Werte kippen es links herum.

Hier ein Beispielcode...

<!-- BEGIN TABS --> {{Benutzer:DeinBenutzername/MyTabMenu | Position=Top | Tab2=Active | BgColor=FFFFFF | Rotate=-3 | Shadow=On }}

<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}

...der die folgende Ausgabe erzeugt:

  Tab1   Tab2   Tab3   Tab4   Tab5  

Ausgangsvorlage (ein Klick darauf führt zum Quellcode der Vorlage)


Menübreite, Ausrichtung und Abstand zum Rand

[Quelltext bearbeiten]

Die Breite des Menüs festlegen (FrameWidth)

[Quelltext bearbeiten]

Der Parameter

FrameWidth = 25%

erzeugt ein Tabmenü mit einer Breite von 25% des zur Verfügung stehenden Platzes auf dem Bildschirm.

Der folgende Code...

<!-- BEGIN TABS --> {{Benutzer:MaxMustermann/MyTabMenu | Position=Top | Tab2=Active | BgColor=FFFFFF | Shadow=On | FrameWidth=25% | FrameAlign=center | Margin=0px | Padding=0px | Move=0px, 0 }}
Das ist ein Test.
<!-- END OF TABS -->{{TabMenu | Mode=EndTabMenu }}
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text...

...der in diesem Beispiel ein vorgefertigtes TabMenü vor einem großen Textblock einbindet, erzeugt je nach angepaßtem Parameter die folgenden Ausgaben:

Das Menü innerhalb Deiner Seite rechts platzieren (FrameAlign = right)

[Quelltext bearbeiten]

Ändert man im obigen Codebeispiel den Parameter

FrameAlign = right

so bindet sich das Menü auf diese Weise in die Ausgabe ein:

  Tab1   Tab2  

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Das Menü innerhalb Deiner Seite zentriert platzieren (FrameAlign = center)

[Quelltext bearbeiten]

Beläßt man im obigen Codebeispiel den Parameter

FrameAlign = center

so bindet sich das Menü auf diese Weise in die Ausgabe ein:

  Tab1   Tab2  

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Der Text wird hier nicht einfach unterbrochen, sondern nach unten verschoben. Anders ist das auch nicht sinnvoll, denn ein Fließtext sollte nicht Zeile für Zeile vor dem Menü beginnen und erst danach weitergehen. Sinnvoll ist das nur, wenn man die Textblöcke separat definiert, die über, vor, hinter und unter dem Menü stehen sollen...

Text darüber: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Text links: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text rechts: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
  Tab1   Tab2  

Das ist ein Test.

Text darunter: Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

... wie unter „Zentriertes Menü umgeben von Text“ beschrieben.

[Quelltext bearbeiten]

Ändert man im obigen Codebeispiel den Parameter

FrameAlign = left

so bindet sich das Menü auf diese Weise in die Ausgabe ein:

  Tab1   Tab2  

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Den inneren Abstand zum Menürand festlegen (Padding)

[Quelltext bearbeiten]

Ändert man im obigen Codebeispiel den Parameter

Padding = 28px

so wird die folgende Ausgabe erzeugt:

  Tab1   Tab2  

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Der Text innerhalb des TabMenüs hielt vorher einen Mindestabstand zum Rand von ca. einer Standardzeichenbreite (links und rechts) bzw. einer Leerzeile (oben und unten). Nun sind dazu noch einmal 28 Pixeln Abstand dazugekommen. Will man links und rechts den zusätzlichen Abstand auf 10 Pixel setzen, oben und unten aber keinen Abstand hinzufügen, so läßt sich dies wie folgt formulieren...

Padding = 0 10px 0 10px (im Uhrzeigersinn oben, rechts, unten, links)

...was die folgende Ausgabe erzeugt:

  Tab1   Tab2  

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Den äußeren Abstand zum Menürand festlegen (Margin)

[Quelltext bearbeiten]

Ändert man im obigen Codebeispiel den Parameter

Margin = 28px

so wird die folgende Ausgabe erzeugt:

  Tab1   Tab2  

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Im Unterschied zum Parameter Padding ändert sich hier der Abstand zur Umgebung des TabMenüs um 28 Pixel. Sollen rechts und unten 10 Pixel gesetzt werden, ohne jedoch links und oben einen Abstand hinzuzufügen, so läßt sich dies wie folgt formulieren...

Margin = 0 10px 10px 0 (im Uhrzeigersinn oben, rechts, unten, links)

...was die folgende Ausgabe erzeugt:

  Tab1   Tab2  

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Das Menü in seiner Position verschieben (Move und Margin)

[Quelltext bearbeiten]

Der Parameter Move aus dem obigen Codebeispiel hebt das Menü aus seinen Angeln und verschiebt es auf dem Bildschirm...

Move = 35px -42px

...was die folgende Ausgabe erzeugt (35 Bildpunkte nach rechts und 42 nach oben):


  Tab1   Tab2  

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Der Parameter Margin aus dem obigen Codebeispiel akzeptiert auch negative Werte und kann damit das Menü in seiner Position verschieben und auch den Abstand zur Umgebung anpassen...

Margin = -55px 10px -10px 5px (im Uhrzeigersinn oben, rechts, unten, links)

...was die folgende Ausgabe erzeugt:



  Tab1   Tab2  

Das ist ein Test.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

  Tab1   Tab2   Tab3  
Tab1   Tab2   Tab3   Tab4   Tab5  

Vorlage1 (als MyTabMenu01; aussen) und Vorlage2 (als MyTabMenu02; innen) wurden hier auf die oben gezeigte Weise eingebunden.

  Tabs oben   Tabs unten   Tabs oben und unten   Menüs verschachteln   Feineinstellungen   Hacks   Fehlersuche   Parameter  
  Zweck und Überblick   Konzept und praktische Anwendung   Formatierung der Tabs   Technischer Hintergrund