Wiki-Quellcode von Attribute
Verstecke letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
 |
1.1 | 1 | {{info}} |
 |
7.1 | 2 | Es sollten keine eigenen HTML-Attribute mit beliebigen Namen mehr benutzt werden. In HTML5 gibt es sogenannte data-Attribute, die stattdessen genutzt werden können. Diese beginnen mit der Vorsilbe //data-//. Beispielsweise ist //data-price// als Attributname in Ordnung, nicht aber //price//. |
| |
1.1 | 3 | {{/info}} |
| 4 | |||
| |
7.1 | 5 | Im Bereich //Attribute// können einem Formularelement HTML-Attribute hinzugefügt werden, auf diese dann später wieder im [[Skriptbereich>>doc:Formcycle.FormDesigner.CodingPanel.ScriptTab.WebHome]] per //Javascript// zugegriffen werden kann. Neben eigenen Attributen können auch bestehende HTML-Attribute überschrieben werden, etwa das Attribut //type// für Input-Elemente. |
| |
1.1 | 6 | |
| |
7.1 | 7 | {{figure image="designer_properties_attributes_de.png"}} |
| 8 | In diesem Bereich können beliebige HTML-Attribute vergeben werden. Dies eignet sich für fortgeschrittene Anwendungen. | ||
| |
1.1 | 9 | {{/figure}} |
| 10 | |||
| 11 | {{figure image="designer_properties_attributes_devtools.png"}} | ||
| |
7.1 | 12 | Die eingegebenen Attribute werden als HTML-Attribute an dem jeweiligen Element hinterlegt. |
| |
1.1 | 13 | {{/figure}} |
| 14 | |||
| |
7.1 | 15 | == Hinzufügen eines Attributs == |
| |
1.1 | 16 | |
| |
7.1 | 17 | Um ein HTML-Attribut hinzuzufügen, tragen Sie einfach in der Spalte //Attribut// den Namen des HTML-Attributs und in die Spalte //Wert// den gewünschten Wert ein. Nach der Eingabe wird automatisch eine neue Zeile für weitere Attribute eingefügt. |
| |
1.1 | 18 | |
| |
7.1 | 19 | == Löschen eines Attributs == |
| |
1.1 | 20 | |
| |
7.1 | 21 | Ein vorhandenes Attribut wird über das Icon {{icon name="trash"}}{{/icon}} links gelöscht. |
| |
1.1 | 22 | |
| |
7.1 | 23 | == Zugriff auf Data-Attribute mittels JavaScript == |
| |
1.1 | 24 | |
| |
7.1 | 25 | Um an einem Element zusätzliche Daten zu hinterlegen, gibt es die sogenannten Data-Attribute. Diese sollten im Namen keine Großbuchstaben enthalten, zudem sollten Wörter durch Bindestriche getrennt werden. Etwa //data-serial-version// ein guter Attributname, //dataSerialVersion// hingegen nicht. Beim Zugriff mittels JavaScript werden die Bindestriche entfernt und die Anfangsbuchstaben der Wörter in Großbuchstaben umgewandelt. |
| |
1.1 | 26 | |
| |
7.1 | 27 | Angenommen, am Element //tfSerialVer// wurde für das Attribut //data-serial-version// wurde der //1aFXc// gesetzt. Dann geschieht der Zugriff über JavaScript wie folgt: |
| |
1.1 | 28 | |
| 29 | {{code language="javascript"}} | ||
| 30 | const serialVersion = $("[name='tfSerialVer']").data("serialVersion"); | ||
| |
7.1 | 31 | console.log("Serial version ist:" , serialVersion); |
| |
1.1 | 32 | {{/code}} |