Cybaer: Zur Info: HTML falten/verstecken (Tabellenzeilen, Absätze, ...)

Beitrag lesen

SELF-Forum

Zur Info: HTML falten/verstecken (Tabellenzeilen, Absätze, ...)

Cybaer Homepage des Autors
– Informationen zu den Bewertungsregeln

Hi,

es war hier ja vor kurzem das Thema, wie man möglichst einfach (Teil-)Bereiche von Tabellen oder mehrere Absätze verschwinden läßt, bzw. wieder sichtbar macht.

Die von mir angekündigte Endfassung meiner damals geposteten Vorabroutine habe ich toggle() genannt, ist nunmehr fertig und kann unter http://Coding.vampirehost.de/Toggle begutachtet, bzw. heruntergeladen werden (ist doch etwas umfangreicher geworden ;-)). So kann man die Funktion mit dem (eigenen) HTML-Attribut GID (Group-ID) steuern (nicht valide nach W3C), aber auch mit dem validen Attribut ID (für die W3C-Puristen ;-)).

Als kurzes Beispiel sei hier nur folgendes aufgeführt (mehr unter dem
URL):

<table>
 <tr><th>Überschrift</th></tr>
 <tr id="Tab11A"><td>Zeile 1</td></tr>
 <tr id="Tab11B"><td>Zeile 2</td></tr>
 <tr id="Tab12C"><td>Zeile 3</td></tr>
 <tr id="Tab11D"><td>Zeile 4</td></tr>
 <tr id="Tab12E"><td>Zeile 5</td></tr>
 <tr id="Leg1"><td>Legende</td></tr>
</table>

Der Funktion toggle() können verschiedene Parameter übergeben werden. Als gewünschte Aktion stehen z.Zt. zur Verfügung fold/unfold (CSS: display) und hide/unhide (CSS: visibility) - auch kombinierbar ("unfold unhide"). Das Element läßt sich dann entweder per ID-Angabe oder per Tag-Angabe mit "ID-Bereich" auswählen.

Beispiele:

  • toggle("fold","Tab11A") würde die erste Tabellenzeile (id="Tab11A") einklappen (Zeile 1 ist danach also nicht mehr sichtbar, der Rest der Tabelle rückt nach, Zeile 2 ist nunmehr die sichtbare 1. Zeile).
  • toggle("fold","tr:id","Tab1") würde alle TRs durchgehen (kann auch beschränkt werden), die dortigen IDs überprüfen und die Zeilen 1-5 einklappen (ID beginnt mit "Tab1").
  • toggle("fold","tr:id","Tab12") nur die Zeilen 3 & 5 (ID beginnt mit "Tab12"),

usw.

Desweiteren kann man auch Ausnahmen definieren:

  • toggle("fold","tr:id","Tab1","1A","2C") würde 1-5 falten (IDs beginnen mit "Tab1"), 1 & 3 sind jedoch als Ausnahme definiert und werden nicht gefaltet (IDs enden mit "1A" oder "2C").

Last but not least können diese Ausnahmen auch komplementär bearbeitet werden (also falten ist gewünscht, die Ausnahmen werden aber explizit entfaltet):

  • toggle("fold","tr:id","Tab1","2C","2E",true) faltet 1, 2 & 4 und entfaltet 3 & 5.
  • toggle("unfold","tr:id","Tab1","2C","2E",true) enfaltet 1, 2 & 4 und faltet 3 & 5.

Ziel des ganzen war es, HTML-Code ins Netz stellen zu können, der
a) prinzpiell sichtbar ist (also auch auf alten Bowsern, ohne aktiviertes JavaScript oder Suchmaschinen)
b) JavaScript-Nutzern mit DHTML-Browser jedoch Interaktivität ermöglicht (soll auch offline, also ohne Server funktionieren).
c) dieses Ziel zu erreichen, ohne mehrere Versionen vorhalten/erstellen zu müssen.

Ursprungsanwendung war eine Befehlsliste für GfA-Basic, die entweder alle Einträge zeigt (Noscript-Browser oder auf Wunsch), oder nur die Befehle der einzelnen Versionen (je nach Wunsch - 4 Varianten: http://www.vampirehost.de/gruft/coding/gfabas/gfacmd.htm?none).

Mittlerweile ist aber auch ein (für den Auftrageber leicht zu pflegendes) "Drop-Down-Menu" realisiert worden (eher: Down-Display-Menu). Ich denke, der Phantasie sind hier kaum Grenzen gesetzt ... :-)

Gruß, Cybaer

PS: Getestet auf Mozilla, IE, Opera & Konqueror. Erzeugt keine Fehler auf Nicht-DHTML-Browsern.

Beitrag melden
–
Informationen zu den Bewertungsregeln