Есть хорошие примеры использования data-*?

Question

[Павел Воронюк]

Подскажите хорошие туториалы или примеры использования data-* атрибутов.
Чем вообще это хорошо использовать и где применять?

Answer 1

[yuras666]

Удобнее всего работать с ними через jquery data - это решит проблему совместимости со всеми браузерами.
https://api.jquery.com/data/
Например у нас есть кнопки по клику на которые у нас должны открываться попапы:

<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>

Далее, мы можем в js описать только один обработчик:

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

Кроме того, ты можешь хранить в data любой json, приводя пример с тем же попапом, можно хранить данные об объекте и строить из них попап после клика на кнопку.
Еще пример jquery плагины часто ставят флаг о том, что они уже установлены на элементе, чтобы избежать повторной инициализации. Скажем $('#search-input').autocomplete() при первой инициализации запишет элементу $('#search-input').data('isAutocompleteInstall', true) и инициализирует элемент, а при втором вызове уже не будет инициализироваться по новой. Как-то так, если я верно понял твой вопрос.

Comments

[Петр]

Метод jquery data не использует атрибут data-*, он работает по другому.

[Андрей]

Петр: jquery data использует свойство а не атрибут?

[Петр]

Андрей: Нет. jquery создает хранилище в котором содержит сопоставление "инстанс элемента" => "колекция (ключ - значение)"

[yuras666]

Петр: Можешь объяснить каким образом и почему?

[Петр]

yuras666: Почему, это к создателям jquery, видать были причины. Но метод data хранит/получает данные в отдельном глобальном обьекте.

Answer 2

[Петр]

В input элементах форм, для дальнейшей валидации.

<input name='name' data-required='Необходимо задать имя обьекта' />

есть атрибут data-required значит поле обязательное, для информации можем вывести содержимое атрибута.

Answer 3

[Павел Воронюк]

Петр в чем приемущество от использования вашего примера от этого например?

<input name='name' title='Необходимо задать имя обьекта' required />

при чем data-required пропустит дальше, а required нет.

Comments

[Петр]

data-* введен для дополнительных-пользовательских атрибутов. Я выше привел простой пример, а ваша валидация может быть в разы сложнее, с примеру data-field-value-equal='confirm_password'

Answer 4

[Сергей]

Использую, когда нужно передать данные аяксом.