... |
... |
@@ -1,10
+1,14 @@ |
1 |
|
-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. |
|
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}} |
2 |
2 |
|
3 |
|
-{{figure image="eigenschaften_attr_1.png" width="200" group="addAttr"}} |
|
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"}} |
4 |
4 |
In diesem Bereich können beliebige HTML-Attribute vergeben werden. Dies eignet sich für fortgeschrittene Anwendungen. |
5 |
5 |
{{/figure}} |
6 |
6 |
|
7 |
|
-{{figure image="eigenschaften_attr_2.png" group="addAttr" width="400"}} |
|
11 |
+{{figure image="designer_properties_attributes_devtools.png"}} |
8 |
8 |
Die eingegebenen Attribute werden als HTML-Attribute an dem jeweiligen Element hinterlegt. |
9 |
9 |
{{/figure}} |
10 |
10 |
|
... |
... |
@@ -14,4
+14,15 @@ |
14 |
14 |
|
15 |
15 |
== Löschen eines Attributs == |
16 |
16 |
|
17 |
|
-Ein vorhandenes Attribut wird über das Papierkorb-Icon {{icon name="trash"}}{{/icon}} links gelöscht. |
|
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}} |