Zusammenfassung

• Seiteneigenschaften (2 geändert, 0 hinzugefügt, 0 gelöscht)

Details

Seiteneigenschaften

Titel

...	...	@@ -1,1 +1,1 @@
1		-Nummerierung dynamischer Elemente
	1	+Nummerierung wiederholbarer Elemente

Inhalt

...	...	@@ -1,44 +1,46 @@
1		-Manchmal ist es sinnvoll, bei dynamischen Elementen eine fortlaufende Nummer anzuzeigen. Dies kann mittels CSS gelöst werden.
	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 wird im {{designer case="dat"/}}ein [[Auswahlelement>>doc:Main.Auswahl]] in das Formularelement eingefügt. Für die folgende Erklärung habe das Auswahlelement den Namen //sel1//.
4		-
5		-{{figure image="FCDyn.png"}}
6		-Anzeige einer fortlaufenden Nummer an dynamischen Elementen.
	3	+{{figure image="gettingstarted_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.
7	7	{{/figure}}
8	8
9		-== Änderungen Skriptbereich ==
	7	+== Änderungen im Formular ==
10	10
11		-Im [[Skriptbereich>>doc:Main.TAB - Script]] wird das Element mittels der Funktion [[dynamic()>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.AdditionalScriptFunctions.Dynamic]] als dynamisches Element eingestellt.
	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		-{{code language="javascript"}}
14		-$('[name="tf1"]').dynamic()
15		-{{/code}}
	11	+== Änderungen im CSS-Bereich ==
16	16
17		-== Änderungen CSS-Bereich ==
	13	+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:
18	18
19		-Im [[CSS-Bereich>>doc:Main.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//.
	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.
20	20
	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	+
21	21	{{code language="css"}}
22		-[xn="tf1"] {
23		- counter-reset: tf1row;
	25	+/* Container der wiederholbaren Element auswählen */
	26	+/* Und den Zähler hier zurücksetzen */
	27	+.xm-item-div[data-xm-dynamic] {
	28	+ counter-reset: counterWdh;
24	24	}
25	25
26		-[xn="tf1"] > .dynamic-row > label:before {
27		- counter-increment: tf1row;
28		- content: "Überschrift für Zeile " counter(tf1row);
29		- color: red;
	31	+/** Für jedes wiederholte Element den Zähler um eins erhöhen */
	32	+.dynamic-row {
	33	+ counter-increment: counterWdh;
30	30	}
31	31
32		-[xn="tf1"] > .dynamic-row > label > p:before {
33		- content: "Text vor der Zeile " counter(tf1row) ". ";
	36	+/* Den Beschriftungstext der Formularelemente auswählen */
	37	+.dynamic-row label > p::before,
	38	+.dynamic-row legend::before {
	39	+ /** Die Nummer vor dem Text hinzufügen */
	40	+ content: counter(counterWdh) ". ";
	41	+ /** Und zu Demozwecken blau einfärben */
34	34	color: blue;
35	35	}
36		-.dynamic-row {
37		- margin-top: 1em;
38		- margin-bottom: 1em;
39		-}
40	40	{{/code}}
41	41
42		-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.
43		-
44		-Mittels der Eigenschaft //content// wird der Text für die Nummerierung gesetzt. Bei {{code}}"Überschrift für Zeile " counter(tf1row){{/code}} beispielweise wird der momentane Wert des //counter// eingefügt.
	46	+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.