Wiki-Quellcode von Nummerierung wiederholbarer Elemente

Verstecke letzte Bearbeiter

version	line-number	content
8.2	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.1	2
8.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//.
1.1	4
8.2	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.
1.1	7	{{/figure}}
	8
8.2	9	== Änderungen im Formular ==
1.1	10
8.2	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]].
1.1	12
8.2	13	== Änderungen im CSS-Bereich ==
1.1	14
8.2	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:
1.1	16
8.2	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.
1.1	21
8.2	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
1.1	26	{{code language="css"}}
8.2	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;
1.1	31	}
	32
8.2	33	/** Für jedes wiederholte Element den Zähler um eins erhöhen */
	34	.dynamic-row {
	35	counter-increment: counterWdh;
1.1	36	}
	37
8.2	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 */
1.1	44	color: blue;
	45	}
	46	{{/code}}
	47
8.2	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.

Wiki-Quellcode von Nummerierung wiederholbarer Elemente

Navigation