Wiki source code of Attribute
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 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}} |