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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.