Zusammenfassung

• Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
• Anhänge (0 geändert, 3 hinzugefügt, 4 gelöscht)
  • 004En.png
  • eigenschaften_attr_0.png
  • eigenschaften_attr_1.png
  • eigenschaften_attr_2.png
  • designer_properties_attributes_de.png
  • designer_properties_attributes_devtools.png
  • designer_properties_attributes_en.png

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="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}}

004En.png

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.gru

Größe

...	...	@@ -1,1 +1,0 @@
1		-3.1 KB

Inhalt

eigenschaften_attr_0.png

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.gru

Größe

...	...	@@ -1,1 +1,0 @@
1		-6.0 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