Wiki-Quellcode von Attribute
Verstecke letzte Bearbeiter
author | version | line-number | content |
---|---|---|---|
13.2 | 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}} | ||
1.1 | 4 | ||
13.2 | 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"}} | ||
1.1 | 8 | In diesem Bereich können beliebige HTML-Attribute vergeben werden. Dies eignet sich für fortgeschrittene Anwendungen. | |
9 | {{/figure}} | ||
10 | |||
13.2 | 11 | {{figure image="designer_properties_attributes_devtools.png"}} | |
1.4 | 12 | Die eingegebenen Attribute werden als HTML-Attribute an dem jeweiligen Element hinterlegt. | |
13 | {{/figure}} | ||
1.1 | 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 | |||
1.4 | 19 | == Löschen eines Attributs == | |
1.1 | 20 | ||
13.2 | 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}} |