Zusammenfassung

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

Details

Seiteneigenschaften

Inhalt

...	...	@@ -1,44 +1,48 @@
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//.
	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	4
5		-{{figure image="FCDyn.png"}}
6		-Anzeige einer fortlaufenden Nummer an dynamischen Elementen.
	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.
7	7	{{/figure}}
8	8
9		-== Änderungen Skriptbereich ==
	9	+== Ä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.
	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]].
12	12
13		-{{code language="javascript"}}
14		-$('[name="tf1"]').dynamic()
15		-{{/code}}
	13	+== Änderungen im CSS-Bereich ==
16	16
17		-== Änderungen CSS-Bereich ==
	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:
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//.
	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.
20	20
	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	+
21	21	{{code language="css"}}
22		-[xn="tf1"] {
23		- counter-reset: tf1row;
	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;
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;
	33	+/** Für jedes wiederholte Element den Zähler um eins erhöhen */
	34	+.dynamic-row {
	35	+ counter-increment: counterWdh;
30	30	}
31	31
32		-[xn="tf1"] > .dynamic-row > label > p:before {
33		- content: "Text vor der Zeile " counter(tf1row) ". ";
	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 */
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.
	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.

gettingstarted_css_counter_repeatable_elements_en.png

Author

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

Größe

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

Inhalt