Hilfe:Toggle

Aus OPwiki

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
[Entwurfsversion][gesichtete Version]
(Hilfe:Toggle)
K (+ Radius für Ecken per aktueller CSS-Eigenschaft (für alle Browser))
Zeile 85: Zeile 85:
<pre>
<pre>
-
{| border="1" cellspacing="0" cellpadding=4 align=center width=750 style="border: 1px #8B4513 solid; -moz-border-radius:5px;"
+
{| border="1" cellspacing="0" cellpadding=4 align=center width=750 style="border: 1px #8B4513 solid; border-radius:5px;"
-
! style="background-color:#8B4513; border: 1px #8B4513 solid; -moz-border-radius-topleft:5px;" |<p style="color: #fff;">Spalte1</p>
+
! style="background-color:#8B4513; border: 1px #8B4513 solid; border-top-left-radius:5px;" |<p style="color: #fff;">Spalte1</p>
! style="background-color:#8B4513; border: 1px #8B4513 solid;" |<p style="color: #fff;">Spalte2</p>
! style="background-color:#8B4513; border: 1px #8B4513 solid;" |<p style="color: #fff;">Spalte2</p>
|-
|-
Zeile 111: Zeile 111:
<span class="_toggler-schieben schieben" style="display:none;"><center>Blende Zeile aus <br /></center></span>
<span class="_toggler-schieben schieben" style="display:none;"><center>Blende Zeile aus <br /></center></span>
<span class="_toggler-ändern"><center>Ändere Zeileninhalt</center></span>
<span class="_toggler-ändern"><center>Ändere Zeileninhalt</center></span>
-
{| border="1" cellspacing="0" cellpadding=4 align=center width=750 style="border: 1px #8B4513 solid; -moz-border-radius:5px;"
+
{| border="1" cellspacing="0" cellpadding=4 align=center width=750 style="border: 1px #8B4513 solid; border-radius:5px;"
-
! style="background-color:#8B4513; border: 1px #8B4513 solid; -moz-border-radius-topleft:5px;" |<p style="color: #fff;">Spalte1</p>
+
! style="background-color:#8B4513; border: 1px #8B4513 solid; border-top-left-radius:5px;" |<p style="color: #fff;">Spalte1</p>
! style="background-color:#8B4513; border: 1px #8B4513 solid;" |<p style="color: #fff;">Spalte2</p>
! style="background-color:#8B4513; border: 1px #8B4513 solid;" |<p style="color: #fff;">Spalte2</p>
|-
|-
Zeile 139: Zeile 139:
<pre>
<pre>
-
{| border="1" cellspacing="0" cellpadding=4 align=center width=750 style="border: 1px #8B4513 solid; -moz-border-radius:5px;"
+
{| border="1" cellspacing="0" cellpadding=4 align=center width=750 style="border: 1px #8B4513 solid; border-radius:5px;"
-
! style="background-color:#8B4513; border: 1px #8B4513 solid; -moz-border-radius-topleft:5px;" |<p style="color: #fff;">Spalte1</p>
+
! style="background-color:#8B4513; border: 1px #8B4513 solid; border-top-left-radius:5px;" |<p style="color: #fff;">Spalte1</p>
! style="background-color:#8B4513; border: 1px #8B4513 solid;" |<p style="color: #fff;">Spalte2</p>
! style="background-color:#8B4513; border: 1px #8B4513 solid;" |<p style="color: #fff;">Spalte2</p>
|-
|-
Zeile 160: Zeile 160:
{{spoilertab}}
{{spoilertab}}
-
{| border="1" cellspacing="0" cellpadding=4 align=center width=750 style="border: 1px #8B4513 solid; -moz-border-radius:5px;"
+
{| border="1" cellspacing="0" cellpadding=4 align=center width=750 style="border: 1px #8B4513 solid; border-radius:5px;"
-
! style="background-color:#8B4513; border: 1px #8B4513 solid; -moz-border-radius-topleft:5px;" |<p style="color: #fff;">Spalte1</p>
+
! style="background-color:#8B4513; border: 1px #8B4513 solid; border-top-left-radius:5px;" |<p style="color: #fff;">Spalte1</p>
! style="background-color:#8B4513; border: 1px #8B4513 solid;" |<p style="color: #fff;">Spalte2</p>
! style="background-color:#8B4513; border: 1px #8B4513 solid;" |<p style="color: #fff;">Spalte2</p>
|-
|-

Version vom 00:07, 17. Jun. 2012

Toggler bieten euch die Möglichkeit, einzelne Bereiche in Texten beim Klicken eines Links oder auch eines Buttons anzuzeigen oder zu verbergen. Dadurch können Seiten besser geordnet, und somit überlange Seiten vermieden werden. Auf Englisch gibt es diese Hilfe ebenfalls, und zwar hier.

Inhaltsverzeichnis

Funktionsweise

Der Toggler bietet die Möglichkeit, einzelne Texte durch einen Schalter ein- und auszuklappen. Damit jedoch nichts verwechselt wird, muss der Toggler zuerst mit einem Namen versehen werden. Ausserdem definiert "Text" den Bereich, den der Toggler später umfassen soll.

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

Um einen Text zunächst nicht anzuzeigen, ist eine weitere Option notwendig:

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

Dadurch wird der Toggler zunächst nicht angezeigt, kann jedoch nicht angezeigt werden, da der nötige Schalter dazu noch fehlt.


Toggler

Um nun einen solchen Bereich zu verbergen, bzw. anzuzeigen, muss noch ein sogenannter Toggler, also ein Schalter für den jeweiligen Bereich angelegt werden.

<span class="_toggler-NAME">Dieser Text ist der Schalter</span>

Das "NAME" muss natürlich vorher durch den zuvor festgelegten Togglernamen ersetzt werden. Dadurch wird sämtlicher Text in Bereichen der Klasse "NAME" umgeschaltet.

Darüber hinaus 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

Gebt ihr zum Beispiel folgendes ein:

<span class="_toggler-SCHALTER1"> Dieser Text ändert den Zustand des Bereichs "Schalter1"</span>
<div class="SCHALTER1"> Text </div>
<div class="SCHALTER1" style="display:none;"> anderer Text </div>

Wird es folgendermaßen dargestellt:

Dieser Text ändert den Zustand des Bereichs "Schalter1"

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.

Beispiel

<span class="_togglegroup _toggler">Schalter für den Text in der Togglegroup</span>

<div class="_toggle">Text, der geschaltet wird</div>
<div class="_toggle" style="display:none;">Text, der am Anfang verborgen ist</div>

Schalter für den Text in der Togglegroup

Text, der geschaltet wird


Toggler in Tabellen

Am Beispiel einer Tabelle wird hier gezeigt, 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.

{| border="1" cellspacing="0" cellpadding=4 align=center width=750 style="border: 1px #8B4513 solid; border-radius:5px;"

! style="background-color:#8B4513; border: 1px #8B4513 solid; border-top-left-radius:5px;" |<p style="color: #fff;">Spalte1</p>
! style="background-color:#8B4513; border: 1px #8B4513 solid;" |<p style="color: #fff;">Spalte2</p>
|-
| erste Zeile 
| erste Zeile
|-
| class="ändern" style="display:none;" | Info2
| class="ändern" style="display:none;" | Info2
| class="ändern" | Info1
| class="ändern" | Info1
|-
| dritte Zeile
| dritte Zeile
|-
| class="schieben" style="display:none;" | vierte Zeile
| class="schieben" style="display:none;" | vierte Zeile
|-
| unterste
| Zeile
|}
Blende Zeile ein
Ändere Zeileninhalt

Spalte1

Spalte2

erste Zeile erste Zeile
Info1 Info1
dritte Zeile dritte Zeile
unterste Zeile


Spoiler in Tabellen

Natürlich ist auch in Tabellen, welche Spoilerinfos enthalten, eine gezielte Verspoilerung möglich. Dazu setzt ihr an den Anfang des Artikels {{spoilertab}} und | class="jp" style="display:none;" vor die Zeile, die verspoilert werden soll. Dadurch ist kein umständliches Verspoilern mit {{SpoilerT| Info }} mehr nötig.

{| border="1" cellspacing="0" cellpadding=4 align=center width=750 style="border: 1px #8B4513 solid; border-radius:5px;"

! style="background-color:#8B4513; border: 1px #8B4513 solid; border-top-left-radius:5px;" |<p style="color: #fff;">Spalte1</p>
! style="background-color:#8B4513; border: 1px #8B4513 solid;" |<p style="color: #fff;">Spalte2</p>
|-
| Testtabelle 
| zweite Zelle
|-
| dritte Zeile
| Zelle
|-
| unterste
| Zeile
|-
| class="jp" style="display:none;" | Spoilerinfo1
| class="jp" style="display:none;" | Spoilerinfo2
|}
!!! SPOILER WARNUNG (anzeigen) !!!

Spalte1

Spalte2

Erste Zeile Erste Zeile
Zweite Zeile Zweite Zeile
unterste Zeile
Persönliche Werkzeuge
Nakama
Toplists
  • AnimeManga Charts