Wiki source code of Attribute
Hide last authors
| author | version | line-number | content |
|---|---|---|---|
 |
1.1 | 1 | {{info}} |
 |
8.1 | 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//. |
| |
1.1 | 3 | {{/info}} |
| 4 | |||
| |
8.1 | 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. |
| |
1.1 | 6 | |
| |
8.1 | 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. | ||
| |
1.1 | 9 | {{/figure}} |
| 10 | |||
| 11 | {{figure image="designer_properties_attributes_devtools.png"}} | ||
| |
8.1 | 12 | A custom HTML attribute has been added and can be seen when inspecting the generated HTML. |
| |
1.1 | 13 | {{/figure}} |
| 14 | |||
| |
8.1 | 15 | == Adding an attribute == |
| |
1.1 | 16 | |
| |
8.1 | 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. |
| |
1.1 | 18 | |
| |
8.1 | 19 | == Deleting an attribute == |
| |
1.1 | 20 | |
| |
8.1 | 21 | Click on the {{icon name="trash"/}} icon to the left to delete an attribute. |
| |
1.1 | 22 | |
| |
8.1 | 23 | == Accessing data attributes via JavaScript == |
| |
1.1 | 24 | |
| |
8.1 | 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. |
| |
1.1 | 26 | |
| |
8.1 | 27 | Assuming the attribute //data-serial-version// was set to //1aFXc// for the element //tfSerialVer//, you can access this data as follows: |
| |
1.1 | 28 | |
| 29 | {{code language="javascript"}} | ||
| 30 | const serialVersion = $("[name='tfSerialVer']").data("serialVersion"); | ||
| |
8.1 | 31 | console.log("Serial version is:" , serialVersion); |
| |
1.1 | 32 | {{/code}} |