So sorgen Sie für Übersicht

Teil 4: Workshop CSS: Aufklappbare Elemente

Dafür setzen wir zwei Pfeile ein. Die beiden Grafiken werden dynamisch über die Javascript-Funktion gesetzt, da eine statische Zuweisung die Flexibilität deutlich einschränken würde. Aus diesem Grund gibt es die beiden Variablen

var zuklappenBild='up.gif';
var aufklappenBild='down.gif';

die direkt mit dem jeweils passenden Bild verknüpft sind. Abhängig vom Zustand der Tabelle müssen auch die beiden Symbole einen dynamischen Wandel zwischen aufgeklappt und komprimiert mitmachen. Den einfachen Austausch der beiden Bilder erledigen Sie mithilfe zweier Zeilen:

var linkBild=this.
getElementsByTagName('img')[0];
linkBild.src=linkBild.src.indexOf
(zuklappenBild)==-1?zuklappenBild:aufklappenBild;

Als Erstes wird ermittelt, welches Bild aktuell dargestellt wird - im nächsten Schritt erfolgt dann die Korrektur der Verlinkung auf den aktuellen Wert.Etwas komplexer ist es, das jeweilige Symbol an der richtigen Stelle zu platzieren. Dafür wird als Erstes ein Anchor-Element angelegt, dieses mit der Verlinkung auf das Gatter - also in den leeren Raum - versehen und mit einer Funktion versehen, welches das Ereignis onClick mit false quittiert.

Symbol richtig platzieren

Etwas komplexer ist es, das jeweilige Symbol an der richtigen Stelle zu platzieren. Dafür wird als Erstes ein Anchor-Element angelegt, dieses mit der Verlinkung auf das Gatter - also in den leeren Raum - versehen und mit einer Funktion versehen, welches das Ereignis onClick mit false quittiert.

var neueVerlinkung=docum
ent.createElement('a');
neueVerlinkung.href='#';
neueVerlinkung.
onclick=function(){return false;}

Anschließend wird ein neues Objekt angelegt, welches mit dem Bild und den zugehörigen Eigenschaften verknüpft wird. In unserem Beispiel erhält dies den Variablennamen neuesBild und abhängig vom Wert der Variablen entweder den Link auf die Datei up.gif oder down.gif zugewiesen.

var neuesBild=
document.createElement('img');
neuesBild.src=Aufgangslage_Tabelle?
aufklappenBild:zuklappenBild;

Damit das Bild auch ordentlich platziert werden kann, ist am Ende der Fußzeile ein weiteres Tabellenfeld notwendig. Da die Fußzeile lediglich ein <td>-Element beinhaltet, haben Sie dies auch einfach über die Funktion getElementsByName[] gefunden.

var tf=t[i].getElementsByTagName
('tfoot')[0];
var lt=tf.getElementsByTagName
('td')[tf.getElementsByTagName('td').length-1];

Abschließend werden die Elemente zusammengefügt und die Bildinformation der Verlinkung über die Methode appendChild() als neues Kindelement am Ende angefügt. Diese Daten werden als neues Tabellenfeld in die bestehende Fußzeile eingefügt, sodass Sie auch das Pfeilsymbol direkt anklicken können.

neueVerlinkung.appendChild
(neuesBild);
lt.insertBefore(neueVerlinkung,
lt.firstChild);

Die zugehörige Funktion zum Ein- und Ausblenden der Tabellenfelder werden bereits weiter oben im Skript den einzelnen Elementen der Fußzeile zugewiesen. Mit einer anderen Technik gehen Sie bei Navigationsmenüs an den Start. Das Grundgerüst dafür stellt eine HTML-Seite mit Aufzählung dar. Im folgenden Beispiel gibt es drei Menüs mit jeweils mehreren Untermenüpunkten.

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…