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'));

});

})