Teil 4: Workshop CSS: Aufklappbare Elemente
- Workshop CSS: Aufklappbare Elemente
- Teil 2: Workshop CSS: Aufklappbare Elemente
- Teil 3: Workshop CSS: Aufklappbare Elemente
- Teil 4: Workshop CSS: Aufklappbare Elemente
- Teil 5: 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...
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.
