Änderungen von Dokument Attribute
Änderungskommentar:
Neues Bild designer_properties_attributes_devtools.png hochladen
Zusammenfassung
-
Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
-
Anhänge (0 geändert, 3 hinzugefügt, 3 gelöscht)
Details
- Seiteneigenschaften
-
- Inhalt
-
... ... @@ -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="eig enschaften_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}}
- 004En.png
-
- Author
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.gru - Größe
-
... ... @@ -1,1 +1,0 @@ 1 -3.1 KB - Inhalt
- eigenschaften_attr_1.png
-
- Author
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.gru - Größe
-
... ... @@ -1,1 +1,0 @@ 1 -9.5 KB - Inhalt
- eigenschaften_attr_2.png
-
- Author
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.gru - Größe
-
... ... @@ -1,1 +1,0 @@ 1 -32.4 KB - Inhalt
- designer_properties_attributes_de.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.awa - Größe
-
... ... @@ -1,0 +1,1 @@ 1 +6.2 KB - Inhalt
- designer_properties_attributes_devtools.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.awa - Größe
-
... ... @@ -1,0 +1,1 @@ 1 +44.4 KB - Inhalt
- designer_properties_attributes_en.png
-
- Author
-
... ... @@ -1,0 +1,1 @@ 1 +XWiki.awa - Größe
-
... ... @@ -1,0 +1,1 @@ 1 +6.5 KB - Inhalt