Alternierende Listen umsetzen
21. Juni 2023
liste eintrag einträge abwechseln alternierend css css-only
Listen mit abwechselnden Eigenschaften pro Eintrag lassen sich auf unterschiedliche Weise umsetzen
Um Listeneinträge besser voneinander absetzen zu können, bietet sich eine unterschiedliche Darstellung der einzelnen Listeneinträge an (z.B. alternierend). Dieser Artikel führt unterschiedliche Lösungen hierfür an.
Beispiel 1: Umsetzung über die Listendarstellung des Objektes
Ab CMS-Version 17 bietet die BASE (Mobile First) über den Objekt-Wizard eine komfortable Lösung, um alternierende Listeneinträge umzusetzen.
Das Container-Element ermöglicht es, über die CSS-Only-Variante 170 ("Enthaltene Container alternieren"), enthaltene Container zu alternieren.
Setzen Sie in in der Listenvariante einen Container mit der Variante 170 und darin dann den Container, welcher die Listeneinträge definiert.
Beispiel 2: Umsetzung über CSS (nth-child)
Eine einfache Lösung in einem BASE Classic Projekt 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 3: 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.