Wiki-Quellcode von Attribute
Zeige letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
| 1 | {{info}} | ||
| 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//. | ||
| 3 | {{/info}} | ||
| 4 | |||
| 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. | ||
| 6 | |||
| 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. | ||
| 9 | {{/figure}} | ||
| 10 | |||
| 11 | {{figure image="designer_properties_attributes_devtools.png"}} | ||
| 12 | Die eingegebenen Attribute werden als HTML-Attribute an dem jeweiligen Element hinterlegt. | ||
| 13 | {{/figure}} | ||
| 14 | |||
| 15 | == Hinzufügen eines Attributs == | ||
| 16 | |||
| 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. | ||
| 18 | |||
| 19 | == Löschen eines Attributs == | ||
| 20 | |||
| 21 | Ein vorhandenes Attribut wird über das Icon {{icon name="trash"}}{{/icon}} links gelöscht. | ||
| 22 | |||
| 23 | == Zugriff auf Data-Attribute mittels JavaScript == | ||
| 24 | |||
| 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. | ||
| 26 | |||
| 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: | ||
| 28 | |||
| 29 | {{code language="javascript"}} | ||
| 30 | const serialVersion = $("[name='tfSerialVer']").data("serialVersion"); | ||
| 31 | console.log("Serial version ist:" , serialVersion); | ||
| 32 | {{/code}} |