Alternierende Listen umsetzen
12. Januar 2016
liste eintrag einträge abwechseln alternierend css css-only
Listen mit abwechselnden Eigenschaften pro Eintrag lassen sich über das Zeilentemplate und auch rein über CSS umsetzen.
Um Listeneinträge besser voneinander absetzen zu können, bietet sich meist die unterschiedliche Darstellung der einzelnen Listeneinträge an. Dieser Artikel führt unterschiedliche Lösungen hierfür an.
Beispiel 1: Umsetzung über CSS (nth-child)
Die einfachste Lösung ist die Umsetzung rein über CSS (CSS-Only) und den Pseudo-Selektor nth-child.
Im nachfolgenden Beispiel wird dem Vorschaubild innerhalb jedes li-Tags über nth-child(odd) für alle ungeraden Einträge ein float:right mitgegeben. Andere Einträge (gerade) sind standardmässig links ausgerichtet.
Beispiel: Auszug aus der design.css zu Listen-Variante 0
... .listDefault_var0 li.listEntry:nth-child(odd) .listEntryThumbnail {float:right} ...
Beispiel 2: Umsetzung über das XSL-Template
Die Weblication® CMS Listenfunktionalität kombiniert mit xPath-Funktionen bieten Ihnen hierzu eine elegante Lösung.
Das nachfolgende Beispiel generiert eine alternierende Liste. Die Listeneinträge werden abwechselnd in anderer Hintergrundfarbe ausgegeben. Hierzu prüfen Sie innerhalb der foreach-Schleife, ob es sich beim jeweiligen Listeneintrag um eine gerade Positionsnummer handelt. Wenn ja, wird dieser Listeneintrag in einer anderen Hintergrundfarbe angezeigt (z.B. grau (#e0e0e0)), andernfalls ohne Hintergrundfarbe.
Das li-Tag erhält durch die nachfolgende Abfrage abhängig von der Positionsnummer ein anderes Klassen-Attribut zugewiesen.
Beispiel: Auszug aus der default.wFilelist.php mit alternierendem Listeneintrag (li)
... <xsl:template match="/wFilelist"> <div> <!-- Zeigt das zu tranformierende XML-Dokument an--> <!-- <xsl:copy-of select="/" /> --> <ul class="listDefault"> <!-- Schleife über alle Dateien --> <xsl:for-each select="files/file"> <li> <xsl:choose> <xsl:when test="position() mod 2 = 0"> <xsl:attribute name="class">clickable alt</xsl:attribute> </xsl:when> <xsl:otherwise> <xsl:attribute name="class">clickable</xsl:attribute> </xsl:otherwise> </xsl:choose> ...
Beispiel: Auszug aus der design.css
/* ... */ .listDefault li {overflow:hidden;padding:0 0 10px 0;margin:0 0 12px 0;border-bottom:solid 1px #e0e0e0} .listDefault li.alt {background-color:#e0e0e0} /* ... */
Die im Beispiel verwendeten Funktionen können Sie z.B. der SELFHTML-Dokumentation entnehmen, die Sie über die weiterführenden Links finden. Auf die genaue Beschreibung der XSL-Elemente xsl:attribute, xsl:choose, xsl:when, xsl:otherwise und die xPath-Funktion position() (mit Ausdruck mod 2 = 0) wird daher an dieser Stelle verzichtet.