Nummerierung dynamischer Elemente
Manchmal ist es sinnvoll, bei dynamischen Elementen eine fortlaufende Nummer anzuzeigen. Dies kann mittels CSS gelöst werden.
Zuerst wird im Xima® Formcycle-Designerein Auswahlelement in das Formularelement eingefügt. Für die folgende Erklärung habe das Auswahlelement den Namen sel1.
Änderungen Skriptbereich
Im Skriptbereich wird das Element mittels der Funktion dynamic() als dynamisches Element eingestellt.
Änderungen CSS-Bereich
Im CSS-Bereich wird mittels der Eigenschaften counter-increment und counter-reset die Nummerierung vorgenommen. Jedes dynamische Element befindet sich in einem DIV mit der Klasse dynamic-row.
counter-reset: tf1row;
}
[xn="tf1"] > .dynamic-row > label:before {
counter-increment: tf1row;
content: "Überschrift für Zeile " counter(tf1row);
color: red;
}
[xn="tf1"] > .dynamic-row > label > p:before {
content: "Text vor der Zeile " counter(tf1row) ". ";
color: blue;
}
.dynamic-row {
margin-top: 1em;
margin-bottom: 1em;
}
Die Nummerierung kann entweder am LABEL-Element oder in dem darin enthaltenen P-Element vorgenommen werden. Wird sie am LABEL vorgenommen, erscheint der Text über dem eigentlichen Label, sonst links daneben.
Mittels der Eigenschaft content wird der Text für die Nummerierung gesetzt. Bei "Überschrift für Zeile " counter(tf1row) beispielweise wird der momentane Wert des counter eingefügt.