HTML-атрибуты, data атрибуты
Вот такую статью сохранял с хабра давным-давно:
В HTML 5 были введены такие атрибуты тегов, как data-*.
Про них вы наверняка слышали или видели в разных проектах.
Например, их используют такие модные товарищи, как Twitter Bootstrap и jQuery Mobile.
Раньше использовали классы, ради сохранения информации в HTML, с целью последующего использования в js.
И вот нам на помощь спешат атрибуты data-*.
Плюшки
- Можно присобачить к любому тегу и старые браузеры ничего не скажут против.
- Можно в названии писать словосочетания: data-email-id=”190”.
- Можно использовать любую строку в значении.
- Можно использовать любой количество таких параметров для одного тега.
HTML тогда превратится в это:
<div class="items">
<div class="item" data-item="1">...</div>
<div class="item" data-item="3">...</div>
<div class="item" data-item="6">...</div>
<div class="item" data-item="1">...</div>
...
</div>
Теперь самое интересное, а именно — работа в jQuery.
Находим: $(‘[data-email-id]’)
или $(‘[data-action=close]’)
или даже $(‘[data-date^=2010]’)
Получаем значение: var email = $(selector).attr(‘data-email-id’)
Самое интересное — это использование функции .data().
В версии 1.4.3 data() научилось получать наши атрибуты data-* вот таким образом:
var action = $(selector).data(‘action’); // close
Если же мы использовали словосочетание через дефис, то мы сможем получить его в camelCase:
<div id="superid" data-foo-bar="123"></div>
$('#superid').data('fooBar'); // вернет 123
Один минус (а может и не минус) — это то, что в data() сохранится только изначальное значение (кешируется), и если мы изменим значение атрибута (например, через .attr(‘data-foo-bar’, 456)), то получая .data('fooBar') увидим наше старое значение.
Но никто не мешает нам обновлять значение в 2х местах, если мы так захотим:
var baz = 150;
$(selector).data('fooBar', baz).attr('data-foo-bar', baz);
Хотя, если вам не нужно отслеживать код в, например, фаербаге, то можно и не обновлять .attr(), так как он влияет только на “визуальное” отображение.
В общем, как только вам понабиться сохранить дополнительные параметры в теге, то используйте data-атрибуты.
Урезана, полная версия по ссылке ниже.
Вот так вот запихивал в форму тему заказа по клику на кнопку Заказать:
<a class="call-item" href="#" data-tema="Тема сообщения">Заказать</a>
$(document).ready(function(){ $('a.call-item').click(function(e){ $('#name-product').val($(this).attr('data-tema')); }); })
Ссылки и благодарности
Вставлен кусок статьи 2012 года с хабра: HTML-атрибуты data-* для хранения параметров и получения их в js