Wiki-Quellcode von Attributes

Zeige letzte Bearbeiter
1 {{info}}
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 {{/info}}
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 language="none"}}type{{/code}} for {{code language="none"}}<input>{{/code}} elements.
6
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}}
10
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}}
14
15 == Adding an attribute ==
16
17 To add an HTML attribute, just enter the name and the value of the attribute into one of the columns. A new, empty column will be added automatically.
18
19 == Deleting an attribute ==
20
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}}