Zusammenfassung

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

Details

Seiteneigenschaften

Inhalt

...	...	@@ -1,48 +1,44 @@
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.
	1	+Manchmal ist es sinnvoll, bei dynamischen Elementen eine fortlaufende Nummer anzuzeigen. Dies kann mittels CSS gelöst werden.
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//.
	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	4
5		-{{figure image="gettingstarted_css_counter_repeatable_elements_de.png" width="600"}}
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.
	5	+{{figure image="FCDyn.png"}}
	6	+Anzeige einer fortlaufenden Nummer an dynamischen Elementen.
7	7	{{/figure}}
8	8
9		-== Änderungen im Formular ==
	9	+== Änderungen Skriptbereich ==
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]].
	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.
12	12
13		-== Änderungen im CSS-Bereich ==
	13	+{{code language="javascript"}}
	14	+$('[name="tf1"]').dynamic()
	15	+{{/code}}
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:
	17	+== Änderungen CSS-Bereich ==
16	16
17		-* Der Anfangswert ist 0.
18		-* Nun wird die HTML-Struktur des Formulars von oben nach unten durchgegangen.
19		-* Wird auf ein Element mit der {{smallcaps}}Css{{/smallcaps}}-Eigenschaft //counter-reset// getroffen, wird der Zähler auf den angegebenen Wert zurück gesetzt.
20		-* Wird auf ein Element mit der {{smallcaps}}Css{{/smallcaps}}-Eigenschaft //counter-increment// getroffen, wird der Zähler um eins erhöht.
	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//.
21	21
22		-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.
23		-
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		-
26	26	{{code language="css"}}
27		-/* Container der wiederholbaren Element auswählen */
28		-/* Und den Zähler hier zurücksetzen */
29		-.xm-item-div[data-xm-dynamic] {
30		- counter-reset: counterWdh;
	22	+[xn="tf1"] {
	23	+ counter-reset: tf1row;
31	31	}
32	32
33		-/** Für jedes wiederholte Element den Zähler um eins erhöhen */
34		-.dynamic-row {
35		- counter-increment: counterWdh;
	26	+[xn="tf1"] > .dynamic-row > label:before {
	27	+ counter-increment: tf1row;
	28	+ content: "Überschrift für Zeile " counter(tf1row);
	29	+ color: red;
36	36	}
37	37
38		-/* Den Beschriftungstext der Formularelemente auswählen */
39		-.dynamic-row label > p::before,
40		-.dynamic-row legend::before {
41		- /** Die Nummer vor dem Text hinzufügen */
42		- content: counter(counterWdh) ". ";
43		- /** Und zu Demozwecken blau einfärben */
	32	+[xn="tf1"] > .dynamic-row > label > p:before {
	33	+ content: "Text vor der Zeile " counter(tf1row) ". ";
44	44	color: blue;
45	45	}
	36	+.dynamic-row {
	37	+ margin-top: 1em;
	38	+ margin-bottom: 1em;
	39	+}
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.
	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.