<we:block> und <we:listview>: Alternierende CSS-Klassen mit <we:ifPosition>

Um allen ungeraden (1, 3, 5 ...) Wiederholungen innerhalb eines <we:block>- oder <we:listview>-Tags eine andere Farbe zu geben, können Sie das <we:ifPosition>-Tag verwenden. Da sich die Abfrage auf einen Block bezieht, geben Sie dabei dem Attribut "type" den Wert "block" und beim Attribut "reference" setzen Sie als Wert den Namen des Blocks ein. Da geprüft werden soll, ob es sich um eine ungerade (odd) Wiederholung handelt geben Sie dem Attribut "position" den Wert "odd".

In diesem Beispiel ist die Schrift jeder ungeraden Wiederholung innerhalb des Blocks rot.

<style type="text/css">
    .farbe_1 {
        color: #FF0000;
    }
</syle>

<we:block name="MyBlock">
    <div<we:ifPosition type="block" position="odd" reference="MyBlock"> class="farbe_1"</we:ifPosition>>
        Hier steht ein Text.
    </div>
</we:block>

Neben "odd" und "even" kann für das Attribut "position" auch "first" und "last" verwendet werden. Mit position="3" oder position="3,5" kann zudem das dritte bzw. dritte und fünfte Element angesprochen werden, mit operator="every" auch jedes dritte bzw. jedes dritte und fünfte. Mit den operator="equal", "less", "less|equal", "greater", "greater|equal" stehen viele weitere Selektionsmöglichkeiten zur Verfügung.

Folgendes Beispiel gibt den Inhalt eines <we:block> zweispaltig aus:

<style type="text/css">
    body {
        margin: 0;
        padding: 2em;
        font: 0.8em Verdana, Arial, Helvetica, sans-serif;
        color: #000000;
    }

    .odd {
        border: 1px solid green;
        width: 100px;
        float: left;
    }

    .even {
        border: 1px solid red;
        width: 100px;
        float: left;
    }

    .cl {
        clear: left;
    }
</style>

<we:block name="MyBlock">
    <div class="<we:ifPosition type="block" position="odd" reference="MyBlock">odd<we:else/>even</we:ifPosition>">
        <we:input type="text" name="MyText" size="20"/>
    </div>
    <we:ifPosition type="block" position="even" reference="MyBlock"><br class="cl" /></we:ifPosition>
</we:block>