Wiki-Quellcode von Attribute

Zeige letzte Bearbeiter
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}}