Hilfe:Toggle

Aus Narutopedia
Wechseln zu: Navigation, Suche
Navigation



Toggler bieten die Möglichkeit, einzelne Bereich in Texten beim Klicken eines Links anzuzeigen oder zu verbergen. Dadurch lassen sich sehr einfach Spoiler realisieren. Diese Hilfe basiert im Wesentlichen auf der Hilfe zur Extension "Toggle" und erweitert diese um Codebeispiele. Sie ist auf englisch hier zu finden.

Funktionsweise

Die Toggle-Funktion wird über eine Extension realisiert, die einzelne CSS-Klassen anzeigt, bzw. verbirgt. Um also einen Bereich zu verbergen, muss er einer Klasse mit bestimmtem Namen zugeordnet werden:

<div class="Name"> Text </div>

Mit diesem Code wird der div-Bereich der Klasse "Name" zugeordnet. Um einen Text zunächst nicht anzuzueigen, ist eine weitere Option notwendig:

<div class="Name" style="display:none;"> Text </div>

Diese Definitionen funktionieren natürlich auch mit allen weiteren HTML-Bereichsdefinitionen wie span, p, etc. sowie in Wiki-Code wie bspw. bei Tabellen (siehe hier). Darüberhinaus können auch weitere Klassen angegeben werden.

Neben der Möglichkeit, die Ausgangszustände über das Syle-Attribut festzulegen, können diese auch in der Klassendefinition mit _toggle_inithide und _toggle_initshow festgelegt werden.

Toggler

Um nun einen solchen Bereich zu verbergen, bzw. anzuzueigen, muss noch ein sog. Toggler für diese Klasse definiert werden. Die Definition erfolgt ebenfalls in der Klassendefinition. Ein Bereich kann auch mehrere Toggler-Klassen enthalten, also Bereiche mit unterschiedlichen Namen umschalten.

<span class="_toggler-Name"> Dieser Text ändert den Zustand des Bereichs "Name"</span>

Mit diesem Code wird sämtlicher Text in Bereichen der Klasse "Name" umgeschaltet.

Darüberhinaus gibt es noch weitere Togglerklassen, die die Funktion weiter spezifizieren:

  • _toggler_show-(Name)
(Zeigt alle Bereiche mit entsprechendem Namen an, verbirgt sie allerdings nicht.)
  • _toggler_hide-(Name)
(Verbirgt alle Bereiche mit entsprechendem Namen, zeigt sie allerdings nicht an.)
  • _toggler_reset-(Name)
(Setzt alle Bereich auf ihre ursprüngliche Anzeige zurück.)

Es ist auch möglich, dass ein Bereich, der als Toggler definiert ist, selbst umgeschaltet werden kann. Dies ermöglicht bspw. das ändern des Textes, nachdem ein Link angeklickt wurde.

Beispiel 1:

(Das Beispiel demonstriert den obigen Code sowie den Code aus dem Abschnitt Funktionsweise)

Dieser Text ändert den Zustand des Bereichs "Name"

Text
Beispiel 2
<span class="_toggler_show-zeigen _toggler_hide-verbergen verbergen" style="display:none;">Text zeigen</span>
<span class="_toggler_show-verbergen _toggler_hide-zeigen zeigen">Text verbergen</span>

<div class="zeigen">Text wird angezeigt, dazu noch zusätzlicher Text</div>
<div class="verbergen" style="display:none;">Text wird angezeigt</div>

Text verbergen

Text wird angezeigt, dazu noch zusätzlicher Text


Togglegroups

Um komplette Bereiche ohne Angabe eines Namens zu umzuschalten steht die Möglichkeit zur Verfügung, eine sog. Togglegroup, also eine Togglegruppe zu definieren. Um eine Togglegroup zu erstellen, muss in der Klassendefintion des entsprechenden Togglers das Attribut _togglegroup eingefügt werden. Bereiche, die zur Togglegroup gehören sollen, benötigen das Attribut _toggle in ihrer Klassendefinition, allerdings keinen weiteren Namen.

Achtung: Ist auf der Seite die Vorlage Spoiler eingebungen, schaltet diese alle Bereiche um, die _toggle in ihrer Klassendefinition stehen haben.

Beispiel
<span class="_togglegroup _toggler">Umschalter für sämtlichen Text in der Togglegroup</span>

<div class="_toggle">Text, der umgeschaltet wird</div>
<div class="_toggle" style="display:none;">Text, der zunächst verborgen ist</div>

Umschalter für sämtlichen Text in der Togglegroup

Text, der umgeschaltet wird


Vorlage Toggle

Die Vorlage Toggle realsiert eine einfache Möglichkeit, einen Toggler in eine Seite einzubauen und bestimmte Teile auf Wunsch des Lesers anzeigen zu lassen. Allerdings kann diese Vorlage in Kombination mit Spoilern im Moment noch zu Fehlern in der Darstellung führen, da alle Elemente im Toggler in einer Togglegroup sind, d.h. sie werden beim Anzeigen des Spoilers automatisch mit umgeschaltet. Die Verwendung dieser Vorlage wird hier erläutert.

Tabellen

Am Beispiel einer Tabelle soll erläutert werden, dass die Toggle-Funktion auch in Wiki-Code eingebunden werden kann. Im folgenden wird der Inhalt einer Zeile in einer Tabelle geändert, sowie eine komplette Zeile ein- und ausgelbendet. Dabei wird keinerlei HTML-Syntax verwendet.

{| class="prettytable"
|-
| Testtabelle 
| zweite Zelle
|-
| class="aendern" style="display:none;" | Hups 
| class="aendern" style="display:none;" | sala
| class="aendern" | Blubb
| class="aendern" | Blubb Blubb
|-
| dritte Zeile
| Zelle
|-
| class="schieben" style="display:none;" | zunächst
| class="schieben" style="display:none;" | ausgeblendet
|-
| unterste
| Zeile
|}

Blende Zeile ein
Ändere Zeileninhalt

Testtabelle zweite Zelle
Blubb Blubb Blubb
dritte Zeile Zelle
unterste Zeile