jQuery & HTML5 data attributes

Много се радвам, че HTML5 дефинира персонализирани атрибути за данни. Всъщност  такива атрибути могат да се ползват във всяка версия на HTML, но е необходимо да се заложат собствени DTD за описание, а за XHTML – специфичен namespace.

Най-важното нещо е, че data атрибутите не променят структурата и семантиката на съдържанието. Остават прозрачни за крайния потребители и не променят визуализацията. Няма да описвам цялата им структура – за повече информация на сайта на W3.

По време на анализа за един проект установихме, че използването на data атрибутите при предаване и сериализация на JSON обекти за потребителски данни, както и за комуникация м/у обектите на приложението е най-доброто решение. Разработката е доста сложна и няма да ви я описвам, но ще направя една съвсем малка извадка от него, за да ви покажа едно просто примерче за употребата им.

В приложението трябваше при преминаването на мишката над даден обект, други да започнат да изпълняват определена работа. За целта на малката ми демонстрация ще кръстя обекта, в/у който е мишката – управител(manager), а обектите извършващи работата – работници(workers). Няма да пиша цялата сложност на работниците от варианта на проекта, а за целта на демонстрацията – само ще променят цветът си. Цялото прихващане и изпълнение ще минава през jQuery обекти.

Като начало ще създам 3 обекта: Object AObject BObject C. Обграждам ги, за да направя по-консистентен и отзивчив  изгледа им на екрана:

<div id="wrapper">
   <div id="objectA" class="object">Object A</div>
   <div id="separatorA" class="separator">&nbsp;</div>
   <div id="objectB" class="object">Object B</div>    
   <div id="separatorB" class="separator">&nbsp;</div>    
   <div id="objectC" class="object">Object C</div>
</div>

Погледнете Пример 1, за да видите крайния резултат. Както виждате съм добавил и други обекти, за да се видят различни типове.

След като имаме структурата следва да добавим и data атрибутите за управител и работници. Съгласно спецификацията на W3 след data ще добавя думата manager, за да окажа какъв е data атрибута, а след това всеки един manager ще го кръстя – a, b, c. Когато управителите са налице, ще добавим и работниците, т.е. кой обект на кой управител е подчинен:

<div id="wrapper">
   <div id="objectA" class="object" data-manager="a" data-b="true" data-c="true">Object A</div>
   <div id="separatorA" class="separator">&nbsp;</div>>
   <div id="objectB" class="object" data-manager="b" data-a="true" data-c="true">Object B</div>    
   <div id="separatorB" class="separator">&nbsp;</div>    
   <div id="objectC" class="object" data-manager="c" data-a="true" data-b="true">Object C</div>
</div>

Както забелязвате, всеки един обект управител в същото време е и работник, като смяната им зависи от контекста в който попадат. Погледнете Пример 2, за резултата.

С data-manager = "XYZ" отбелязвам имената на управителите, а с data-XYZ = "true" отбелязвам, за кой управител работника връща истина, т.е. му е подчинен. Както забелязвате в Пример 2, добавянето на новите атрибути не наруши целостта на дизайна, след като добавих малко стилове, и остана прозрачно за крайния потребител.

Наблюдение: Използвайте CSS конвенцията за наименуване на data атрибутите. Така си осигурявате правилно интерпретиране от всички браузъри.

Функционалността, която искам да постигна е, при преминаване на мишката над даден обект, той да се идентифицира като управител и да накара работниците си да си сложат жълтите каски :о)

За целта добавям една малка jQuery функция и от APIто използваме jQuery.data():

$(function() {
    var $div = $('div'),
	$object = $div.find('.object');

    $object.hover(function() {
        var $this = $(this),
	    $mngr = $this.data('manager');

	$object.each(function() {
	    var $this = $(this);
	    if ($this.data($mngr)) $this.addClass('work');
	});
    }, function() {
	$object.each(function() {
	    $(this).removeClass('work');
        });
    });
});

Това е всичко. Можете да погледнете финалния Пример 3, за да придобиете представа за крайния резултат. Това е само една съвсем дребна извадка, но е достатъчно показателна за мощта на data атрибутите.

П.П.
Внимавайте
, ако ползвате мобилния framework на jQuery – там метода за достъп до data атрибутите е jqmData().

Вашият коментар