Alternierende Listen umsetzen

12. Jan 2016

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

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.

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG