Änderungen von Dokument Nummerierung wiederholbarer Elemente

Von Version 1.1 >
bearbeitet von gru
am 11.03.2019, 16:29
Auf Version < 12.1 >
bearbeitet von awa
am 14.05.2019, 16:25
>
Änderungskommentar: Neues Bild example_css_counter_repeatable_elements_en.png hochladen

Zusammenfassung

Details

Seiteneigenschaften
Titel
... ... @@ -1,1 +1,1 @@
1 -$services.localization.render("PT.Main.NummerierungdynamischerElemente")
1 +Nummerierung wiederholbarer Elemente
Übergeordnete Seite
... ... @@ -1,1 +1,1 @@
1 -Main.CSS-Bereich
1 +WebHome
Dokument-Autor
... ... @@ -1,1 +1,1 @@
1 -XWiki.gru
1 +XWiki.awa
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: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:TAB - Script]] wird das Element mittels der Funktion [[dynamic()>>doc:Zusaetzliche_Script-Funktionen.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 {{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:
18 18  
19 -Im [[CSS-Bereich>>doc: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 +/* Select the container of repeatable elements */
26 +/* And reset the counter here */
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 +/** For each repeated element, increment the counter by one */
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 +/* Select the label text of each for element */
37 +.dynamic-row label > p::before,
38 +.dynamic-row legend::before {
39 + /** Add the number in front of the label */
40 + content: counter(counterWdh) ". ";
41 + /** And make it blue */
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 +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.
076En.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.gru
Größe
... ... @@ -1,1 +1,0 @@
1 -23.7 KB
Inhalt
FCDyn.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.gru
Größe
... ... @@ -1,1 +1,0 @@
1 -16.1 KB
Inhalt
example_css_counter_repeatable_elements_de.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.awa
Größe
... ... @@ -1,0 +1,1 @@
1 +130.6 KB
Inhalt
example_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

Navigation

Copyright 2000-2025