Benutzer:NeonZero/Templates/TabMenu/Doku/TabFmtInfo

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

Informationen zu dieser Dokumentation
[Bearbeiten] Dokumentation
Hinweis:
STOP! – Die hier beschriebene Vorlage ist ein Entwurf und befindet sich aktuell noch in ständiger Bearbeitung. Wenn Du meine Registerkarten (Tabs) für eigene Projekte verwenden möchtest, dann gedulde Dich bitte noch ein wenig. -- ηeonZERO  07:00, 3. Dez. 2009 (CET)


  Zweck und Überblick   Konzept und praktische Anwendung   Formatierung der Tabs   Technischer Hintergrund  
Tabs oben   Tabs unten   Tabs oben und unten   Tabs einbetten   Parameterübersicht  

In Arbeit ...

Um hier die möglichen Designs beschreiben zu können, wird Beispielhaft davon ausgegangen, dass die folgende Benutzervorlage

  Tab1   Tab2   Tab3   Tab4   Tab5  

Ausgangsvorlage (Tab2 zeigt in dem Beispiel nach Benutzer:MaxMustermann/Tab2)

in den Benutzernamensraum von MaxMustermann kopiert wurde

Benutzer:MaxMustermann/Templates/MyTabMenu

In den folgenden Kapiteln wird die Benutzerseite

Benutzer:MaxMustermann/Tab2

betrachtet. Es wird davon ausgegangen, dass auf dieser Seite das Menü über den folgenden Code eingebunden wurde:

<!-- BEGIN TABS --> {{Benutzer:MaxMustermann/Templates/MyTabMenu | Position=Top | Tab2=Active | BgColor=#FFFFFF }}

Inhalt der innerhalb des Tabrahmens angezeigt werden soll.

<!-- END OF TABS -->{{Benutzer:NeonZero/Templates/TabMenu | Mode=EndTabMenu }}


[Bearbeiten | Quelltext bearbeiten]

Das Erscheinungsbild der Tabs läßt sich wie folgt anpassen: Fügt man bei in der Vorlage für das Tabmenü unter der Konfiguration von Tab5 den Parameter

AdjustRight=60

hinzu, so wird damit festgelegt, dass man hier einen Abstand von 60 Pixeln zwischen dem letzten Tab (hier Tab5) und dem rechten Rand haben möchte.

  Tab1   Tab2   Tab3   Tab4   Tab5  

Letzter Tab: AdjustRight=60; Problem: einzig der IE stellt den Tabnamen nicht mehr zentriert dar (die anderen Browser haben das Problem nicht)

Die Angabe läßt sich auch in Prozent vornehmen: Der Parameter

AdjustRight=25%

erzeugt das folgende Menü:

  Tab1   Tab2   Tab3   Tab4   Tab5  

Letzter Tab: AdjustRight=25%; auch hier besteht das Tabnamen-Problem mit dem IE

Lösungen für das IE-Problem: Der IE ignoriert die Anweisung style="text-align:center;", die in der Vorlage verwendet wird, und stellt den Text der Tabnamen linksbündig dar. Andere Browser haben dieses Problem nicht.

Wer sich daran stört, kann mithilfe der folgenden Anpassung erreichen, dass auch der IE den Text zentriert darstellt:

Man kann jedem Tab eine Automatische Tabbreite zuweisen. Dazu dient der Parameter

TabWidth=0Hinweis: Über einen Klick darauf gelangt man zur Vorlage, die diese Einstellung verwendet.

Das erzeugt ein Menü, welches unter allen Browsern den Text der Tab-Namen zentriert darstellt.

Allerdings hat jeder einzelne Tab dann eine unterschiedliche Größe, je nach Länge des dargestellten Textes (Tabname). Möchte man auch das verhindern, so bietet sich eine andere Lösung an: Zunächst einmal muss der prozentuale Platz berechnet werden, den die Tabs in der zu Grunde liegenden Konfiguration einnehmen sollen.

Oben wurde festgelegt, dass der Platz zwischen dem letzten Tab und dem rechten Rand 25% der Gesamtlänge einnehmen soll. Es bleiben 75% für die Tabs. Es sind insgesamt 5 Tabs. 75% / 5 = 15% pro Tab.

Diese 15% weist man den Tabs zu. Dazu dient der Parameter

TabWidth=15%

Bei der Berechnung wurden die Zwischenräume vernachlässigt. Daher sollte ein Tab (möglichst der mittlere Tab, hier also Tab3) eine automatische Tabbreite erhalten:

Tab3: TabWidth=0

Er wird nun ein wenig kleiner dargestellt, was durch die mittlere Position allerdings kaum auffällt. Je mehr Tabs das Menü enthält, desto größer wird der Effekt allerdings, da es mehr Zwischenräume gibt. Dann kann man bei dem einen oder anderen Tab ggf. 1% abziehen, oder, wie in diesem Fall, die Einrückung des rechten Randes etwas verringern (AdjustRight=23% statt AdjustRight=25%).

Das erzeugt ein Menü, welches unter allen Browsern den Text der Tab-Namen zentriert darstellt.

  Tab1   Tab2   Tab3   Tab4   Tab5  

Tabs 1, 2, 4 und 5: TabWidth=15%; Tab3: TabWidth=0; letzter Tab: AdjustRight=23%; der Tabname wird nun auch im IE zentriert dargestellt


Mit Hilfe des Parameters TabWidth läßt sich die Breite einzelner Tabs unterschiedlich festlegen. Hier ist die ursprüngliche Einstellung der Vorlage, in der einzig der Tab3 über

TabWidth=20%

vergrößert wird.

  Tab1   Tab2   Tab3   Tab4   Tab5  

Wie die Ausgangsvorlage, jedoch mit Tab3: TabWidth=20%

Der Parameters TabSpace legt dagegen den Abstand zwischen den Tabs fest. Hier wird für Tab5 ein

TabSpace=50

verwendet:

  Tab1   Tab2   Tab3   Tab4   Tab5  

Wie zuvor, jedoch mit Tab5: TabSpace=50

Tabs rechts anordnen

[Bearbeiten | Quelltext bearbeiten]
[Bearbeiten | Quelltext bearbeiten]

Tabs mittig anordnen

[Bearbeiten | Quelltext bearbeiten]

Tabs über die komplette Breite ziehen (Block)

[Bearbeiten | Quelltext bearbeiten]
  Tab1   Tab2   Tab3   Tab4   Tab5  

Wie die Ausgangsvorlage, jedoch Modus des letzten Tabs: LastBTab; auch hier besteht das IE-Problem

  Tab1   Tab2   Tab3   Tab4   Tab5  

Tab1: TabWidth=19%; Tab2: TabWidth=20%; Tab3: TabWidth=0; Tab4: TabWidth=20%; Tab5: TabWidth=19%; der Tabname wird nun auch im IE zentriert dargestellt

Tabs oben   Tabs unten   Tabs oben und unten   Tabs einbetten   Parameterübersicht  
  Zweck und Überblick   Konzept und praktische Anwendung   Formatierung der Tabs   Technischer Hintergrund