Changes for page Attribute
Change comment:
Copied from xwiki:Main.FormDesigner.ElementProperties.Attributes
Summary
-
Page properties (2 modified, 0 added, 0 removed)
Details
- Page properties
-
- Author
-
... ... @@ -1,1 +1,1 @@ 1 -XWiki. fse1 +XWiki.gru - Content
-
... ... @@ -1,16 +1,12 @@ 1 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//.2 +Custom HTML attributes are deprecated. HTML5 defines so-called //data-// attributes that can be used to store custom data in HTML elements. 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 language="none"}}type{{/code}} for {{codelanguage="none"}}<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}}type{{/code}} for {{code}}<input>{{/code}} elements. 6 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}} 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}} 10 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}} 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}} 14 14 15 15 == Adding an attribute == 16 16 ... ... @@ -18,15 +18,4 @@ 18 18 19 19 == Deleting an attribute == 20 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}} 17 +Click on the recycle bin icon ({{icon name="trash"}}{{/icon}}) to the left to delete an attribute.