Alternierende Listen umsetzen

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.

Alternierende Liste
Alternierende Liste
Listendarstellung des Objektes - alternierender Container
Listendarstellung des Objektes - alternierender Container

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}
...
Liste mit alternierendem Vorschaubild
Liste mit alternierendem Vorschaubild

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.