Summary

• Page properties (2 modified, 0 added, 0 removed)

Details

Page properties

Author

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

Content

...	...	@@ -1,12 +1,16 @@
1	1	{{info}}
2		-Custom HTML attributes are deprecated. HTML5 defines so-called //data-// attributes that can be used to store custom data in HTML elements.
	2	+Arbitrary custom HTML attributes are deprecated. HTML5 defines so-called //data-// attributes that can be used to store custom data in HTML elements. For example, it is ok to use the attributes //data-price// or //data-serial-id//, but you should not use attributes such as //price// or //serialId//.
3	3	{{/info}}
4	4
5		-The panel //attributes// lets you add custom attributes to the corresponding HTML elements of each form element. You can access them with JavaScript later, or add existing HTML attributes such as the attribute {{code}}type{{/code}} for {{code}}<input>{{/code}} elements.
	5	+The panel //attributes// lets you add custom attributes to the corresponding HTML elements of each form element. You can access them with JavaScript later, or add existing HTML attributes such as the attribute {{code language="none"}}type{{/code}} for {{code language="none"}}<input>{{/code}} elements.
6	6
7		-{{figure image="004En.png" width="200" group="addAttr"}}This panel lets you add custom HTML attributes that may be needed for custom features implemented via JavaScript.{{/figure}}
	7	+{{figure image="designer_properties_attributes_en.png"}}
	8	+This panel lets you add custom HTML attributes that may be needed for custom features implemented via JavaScript.
	9	+{{/figure}}
8	8
9		-{{figure image="eigenschaften_attr_2.png" group="addAttr"}}A custom HTML attribute has been added and can be seen when inspecting the generated HTML.{{/figure}}
	11	+{{figure image="designer_properties_attributes_devtools.png"}}
	12	+A custom HTML attribute has been added and can be seen when inspecting the generated HTML.
	13	+{{/figure}}
10	10
11	11	== Adding an attribute ==
12	12
...	...	@@ -14,4 +14,15 @@
14	14
15	15	== Deleting an attribute ==
16	16
17		-Click on the recycle bin icon ({{icon name="trash"}}{{/icon}}) to the left to delete an attribute.
	21	+Click on the {{icon name="trash"/}} icon to the left to delete an attribute.
	22	+
	23	+== Accessing data attributes via JavaScript ==
	24	+
	25	+If you want to add custom data to an element, use the prefix //data-// for the name. Additionally, the attribute name should contain no uppercase letters and use dashes to separate words. For example, //data-serial-version// is a good data attribute, //dataSerialVersion// is not. When accessing these attributes via JavaScript, remove the dashes and capitalize the first letter of each word.
	26	+
	27	+Assuming the attribute //data-serial-version// was set to //1aFXc// for the element //tfSerialVer//, you can access this data as follows:
	28	+
	29	+{{code language="javascript"}}
	30	+const serialVersion = $("[name='tfSerialVer']").data("serialVersion");
	31	+console.log("Serial version is:" , serialVersion);
	32	+{{/code}}