Splintered striper

Erklärung und Javascript runterladen.

Verbesserte Zebra-Streifen

Track Name Artist
1 (Can't You) Trip Like I Do Filter & Crystal Method
2 Poison The Prodigy
3 Better Things Massive Attack
4 Meatplow Stone Temple Pilots
5 Superunknown Soundgarden
6 Bug Powder Dust Bomb The Bass
7 Papua New Guinea The Future Sound of London
8 Straight Outta Compton N.W.A.
9 Socio-Genetic Experiment Disposable Heroes of Hiphoprisy
10 America - What Time is Love The K.L.F.

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

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.