Splintered striper

Erklärung und Javascript runterladen.

Verbesserte Zebra-Streifen

striper('tbody','gestreift','tr','ungerade,gerade');

Das klassiche "Zebra-Streifen" Beispiel: zwei Klassen werden abwechselnd an jede Tabellenzeile hinzugefügt. Da die neue Funktion sehr generell ist, unterscheidet sie nicht zwischen thead und tbody wenn sie an die ganze table angewandt wird. Darum laßen wir die Funktion auf das tbody Element mit einer class von gestreift wirken (so dass andere Tabellen die gegebenenfalls im Dokument vorhanden sind nicht beeinflußt werden). Einigen Zeilen wurde schon eine class markiert im HTML zugewiesen; diese Klasse bleibt selbst nach Ablauf des Skripts erhalten - die ungerade und gerade Klassen werden einfach an das schon vorhandene class Attribut hinzugefügt. Das CSS enthält einen kombinierten Styl um selbst gerade und ungerade markierte Zeilen mit einer verschiedenen Vordergrundfarbe visuell zu unterscheiden (dieser Effekt funktioniert leider nicht in IE, da der Browser den mehrfachen Klassen-Selektor nicht versteht).

Artists in der Track-Liste

• Filter & Crystal Method
• The Prodigy
• Massive Attack
• Stone Temple Pilots
• Soundgarden
• Bomb The Bass
• The Future Sound of London
• N.W.A.
• Disposable Heroes of Hiphoprisy
• The K.L.F.

striper('ul','gestreift','li','erster,zweiter,dritter');

Hier haben wir die generische Funktion an eine ungeordnete Liste angewandt, um abwechselnd drei verschiedene Klassen zuzuweisen. Um diese Liste anzusteuern benutzen wir auch wieder eine Klasse für das ul Element.

Alle Headings stylen

striper('body',null,'h2','h_ungerade,h_gerade');

Um zu zeigen, dass die Funktion auch sehr generell verwendet werden kann, haben wir sie auf alle h2 Headings im Dokument angewandt indem wir body als parentElementTag spezifizieren und den optionalen parentElementClass Parameter auf null setzen.