... |
... |
@@ -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}} |