Any good examples of using data-*?

Question

HTML

Prompt good tutorials or examples of using data-* attributes.
What is generally good to use and where to apply?

Answer 1

The most convenient way to work with them is through jquery data - this will solve the problem of compatibility with all browsers.
https://api.jquery.com/data/
For example, we have buttons on click on which we should open popups:

<button type="button" data-open-dialog="#bs-example-1-dialog">Окно 1</button>
<button type="button" data-open-dialog="#bs-example-1-dialog">Окно 1</button>
<button type="button" data-open-dialog="#bs-example-1-dialog">Окно 1</button>

Further, we can describe only one handler in js:

$(document).on('click', '[data-open-dialog]', function(){
   showPopupById($(this).data('openDialog'));
});

In addition, you can store any json in data, giving an example with the same popup, you can store object data and build a popup from it after clicking on the button.
For another example, jquery plugins often flag that they are already set on an element to avoid reinitialization. Let's say $('#search-input').autocomplete() on the first initialization will write to the element $('#search-input').data('isAutocompleteInstall', true) and initialize the element, and on the second call it will no longer be initialized by new. Something like this, if I understood your question correctly.

Answer 2

In input form elements, for further validation.
there is a data-required attribute, which means the field is required, for information we can display the contents of the attribute.

Answer 3

Peter , what is the advantage of using your example from this example?
at what data-required skips further, but required does not.

Answer 4

I use it when I need to transfer data with Ajax.