Zusammenfassung

• Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
• Anhänge (0 geändert, 0 hinzugefügt, 1 gelöscht)
  • gettingstarted_css_counter_repeatable_elements_de.png

Details

Seiteneigenschaften

Inhalt

...	...	@@ -1,7 +1,5 @@
1	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	2
3		-Zuerst fügen wir im {{designer case="dat"/}} ein [[Auswahlelement>>doc:Formcycle.FormDesigner.FormElements.Input]] zum Formular hinzu. Dem Auswahlelement geben wir den Namen //tfEmail//.
4		-
5	5	{{figure image="gettingstarted_css_counter_repeatable_elements_de.png" width="600"}}
6	6	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.
7	7	{{/figure}}
...	...	@@ -8,11 +8,11 @@
8	8
9	9	== Änderungen im Formular ==
10	10
11		-Zuerst müssen wir das Formularelement wiederholbar schalten. Dazu setzen wir das Häkchen bei der Einstellung im {{designer/}} unter [[Grundeigenschaften>>doc:Formcycle.FormDesigner.ElementProperties.BaseProperties]].
	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]].
12	12
13	13	== Änderungen im CSS-Bereich ==
14	14
15		-Im [[{{smallcaps}}Css{{/smallcaps}}-Bereich>>doc:Formcycle.FormDesigner.CodingPanel.CSSTab.WebHome]] können wir nun die Nummerierung vornehmen. Dies geschieht mit den CSS-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:
	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:
16	16
17	17	* Der Anfangswert ist 0.
18	18	* Nun wird die HTML-Struktur des Formulars von oben nach unten durchgegangen.
...	...	@@ -24,25 +24,25 @@
24	24	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//.
25	25
26	26	{{code language="css"}}
27		-/* Container der wiederholbaren Element auswählen */
28		-/* Und den Zähler hier zurücksetzen */
	25	+/* Select the container of repeatable elements */
	26	+/* And reset the counter here */
29	29	.xm-item-div[data-xm-dynamic] {
30	30	counter-reset: counterWdh;
31	31	}
32	32
33		-/** Für jedes wiederholte Element den Zähler um eins erhöhen */
	31	+/** For each repeated element, increment the counter by one */
34	34	.dynamic-row {
35	35	counter-increment: counterWdh;
36	36	}
37	37
38		-/* Den Beschriftungstext der Formularelemente auswählen */
	36	+/* Select the label text of each for element */
39	39	.dynamic-row label > p::before,
40	40	.dynamic-row legend::before {
41		- /** Die Nummer vor dem Text hinzufügen */
	39	+ /** Add the number in front of the label */
42	42	content: counter(counterWdh) ". ";
43		- /** Und zu Demozwecken blau einfärben */
	41	+ /** And make it blue */
44	44	color: blue;
45	45	}
46	46	{{/code}}
47	47
48		-Die Nummerierung kann entweder am //LABEL//-Element oder in dem darin enthaltenen //P//-Element vorgenommen werden. Wird sie wie oben im Beispiel am //LABEL// vorgenommen, erscheint der Text über dem eigentlichen Label, sonst links daneben.
	46	+We could add the numbering either to the //LABEL// element or to the //P// element inside the label. When added to the //P// element, as in the example above, the numbering shows up to the left of the label. Otherwise, it shows up on top of the label.

gettingstarted_css_counter_repeatable_elements_de.png

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.awa

Größe

...	...	@@ -1,1 +1,0 @@
1		-132.7 KB

Inhalt