Zeige letzte Bearbeiter
1 Manchmal ist es sinnvoll, bei dynamischen Elementen eine fortlaufende Nummer anzuzeigen. Statt die Nummerierung im {{smallcaps}}Html{{/smallcaps}} fest zu hinterlegen, können wir sie dynamisch durch {{smallcaps}}Css{{/smallcaps}} hinzufügen.
2
3 {{figure image="example_css_counter_repeatable_elements_de.png" width="600"}}
4 Anzeige einer fortlaufenden Nummer an wiederholbaren Elementen. Unter den Grundeigeschaften wird das Element wiederholbar gemacht. Im CSS-Bereich wird die Nummerierung mittels CSS-Zählern hinzugefügt.
5 {{/figure}}
6
7 == Änderungen im Formular ==
8
9 Zuerst fügen wir im {{designer case="dat"/}} einige Formularelement zum Formular hinzu. Nun schalten wie die Formularelemente wiederholbar. Dazu setzen wir das Häkchen bei der Einstellung im {{designer/}} unter [[Grundeigenschaften>>doc:Formcycle.FormDesigner.ElementProperties.BaseProperties]].
10
11 == Änderungen im CSS-Bereich ==
12
13 Im [[{{smallcaps}}Css{{/smallcaps}}-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]] können wir nun die Nummerierung vornehmen. Dies geschieht mit den {{smallcaps}}Css{{/smallcaps}}-Eigenschaften //counter-reset// sowie //counter-increment//. Im {{smallcaps}}Css{{/smallcaps}} kann es einen oder mehrere Zähler geben. Jeder Zähler hat einen Namen und einen aktuellen Zahlenwert. Und wann zählt ein Zähler hoch? Das funktioniert wie folgt:
14
15 * Der Anfangswert ist 0.
16 * Nun wird die HTML-Struktur des Formulars von oben nach unten durchgegangen.
17 * Wird auf ein Element mit der {{smallcaps}}Css{{/smallcaps}}-Eigenschaft //counter-reset// getroffen, wird der Zähler auf den angegebenen Wert zurück gesetzt.
18 * Wird auf ein Element mit der {{smallcaps}}Css{{/smallcaps}}-Eigenschaft //counter-increment// getroffen, wird der Zähler um eins erhöht.
19
20 Das können wir dazu nutzen, den Zähler bei jedem wiederholten Element zu erhöhen. Im Beschriftungstext des Eingabefeld ist es uns so möglich, mittels des Pseudo-Elements //before// und //counter(...)// den aktuellen Wert des Zählers einzufügen.
21
22 Bevor wir das {{smallcaps}}Css{{/smallcaps}} schreiben, müssen wir noch zwei Sachen wissen. Jedes Formularelement befindet sich in einem Container (div) mit der Klasse //xm-item-div//. Dieser Container hat den Namen des Formularlements im Attribut //xn//. Zudem liegt jedes wiederholte Element nochmal in einem eigenen Container mit der Klasse //dynamic-row//.
23
24 {{code language="css"}}
25 /* Select the container of repeatable elements */
26 /* And reset the counter here */
27 .xm-item-div[data-xm-dynamic] {
28 counter-reset: counter;
29 }
30
31 /** For each repeated element, increment the counter by one */
32 .dynamic-row {
33 counter-increment: counter;
34 }
35
36 /* Select the label text of each for element */
37 .dynamic-row label > p::before,
38 .dynamic-row legend::before {
39 /** Add the number in front of the label */
40 /* Example for using letters instead:
41 content: counter(counter, lower-alpha); */
42 content: counter(counter) ". ";
43 /** And make it blue */
44 color: blue;
45 }
46 {{/code}}
47
48 Sie können die Nummerierung entweder dem LABEL-Element oder dem P-Element innerhalb des Labels hinzufügen. Beim Hinzufügen zum P-Element, wie im obigen Beispiel, wird die Nummerierung links von der Beschriftung angezeigt. Andernfalls erscheint es auf dem Label. Weitere verfügbare Typen für Zähler sind: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha.

Navigation

Copyright 2000-2024