Wiki-Quellcode von Nummerierung dynamischer Elemente
Zeige letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
| 1 | Manchmal ist es sinnvoll, bei dynamischen Elementen eine fortlaufende Nummer anzuzeigen. Dies kann mittels CSS gelöst werden. | ||
| 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. | ||
| 7 | {{/figure}} | ||
| 8 | |||
| 9 | == Änderungen Skriptbereich == | ||
| 10 | |||
| 11 | Im [[Skriptbereich>>doc:Main.TAB - Script]] wird das Element mittels der Funktion [[dynamic()>>doc:Formcycle.FormDesigner.ScriptMetaAndCssTabs.ScriptTab.AdditionalScriptFunctions.Dynamic]] als dynamisches Element eingestellt. | ||
| 12 | |||
| 13 | {{code language="javascript"}} | ||
| 14 | $('[name="tf1"]').dynamic() | ||
| 15 | {{/code}} | ||
| 16 | |||
| 17 | == Änderungen CSS-Bereich == | ||
| 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//. | ||
| 20 | |||
| 21 | {{code language="css"}} | ||
| 22 | [xn="tf1"] { | ||
| 23 | counter-reset: tf1row; | ||
| 24 | } | ||
| 25 | |||
| 26 | [xn="tf1"] > .dynamic-row > label:before { | ||
| 27 | counter-increment: tf1row; | ||
| 28 | content: "Überschrift für Zeile " counter(tf1row); | ||
| 29 | color: red; | ||
| 30 | } | ||
| 31 | |||
| 32 | [xn="tf1"] > .dynamic-row > label > p:before { | ||
| 33 | content: "Text vor der Zeile " counter(tf1row) ". "; | ||
| 34 | color: blue; | ||
| 35 | } | ||
| 36 | .dynamic-row { | ||
| 37 | margin-top: 1em; | ||
| 38 | margin-bottom: 1em; | ||
| 39 | } | ||
| 40 | {{/code}} | ||
| 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. |