Как да се изгради по-добро UX с HTML5 данни- * атрибути

Искали ли сте някога да добавите персонализирани данни към даден елемент на HTML, за да можете по-късно да го ползвате с JavaScript? Преди да се появи HTML5 на пазара, съхраняването на персонализирани данни, свързани с DOM, беше истински шум и разработчиците трябваше да използват всички видове неприятни хакове, като въвеждането на нестандартни атрибути или използването на остарял метод setUserData () за справяне с проблема.

За щастие не е нужно да правите това повече, тъй като HTML5 е въвел нов глобален данни-* атрибути, които правят възможно вграждането на допълнителна информация за всички HTML елементи. Новото данни-* атрибути направи HTML по-разширяем, Следователно ви позволява да създавате по-сложни приложения, и създаване на по-усъвършенствано потребителско изживяване, без да се налага да се използват интензивни за ресурсите техники, като например Ajax-повиквания или заявки за бази данни на сървър.

Поддръжката на браузъра на новите глобални атрибути е сравнително добра, тъй като те се поддържат от всички модерни браузъри (IE8-10 частично ги поддържа).

Синтаксис на данни-* Атрибути

Синтаксисът на новото данни-* атрибутите са подобни на тези на атрибутите с префикс ария. Можете да вмъкнете нисък низ на мястото на * знак. Също така трябва да присвоите стойност на всеки атрибут под формата на низ.

Да речем, че искате да създадете За нас страница, както и името на отдела, в който работи всеки служител. Не е нужно да правите нищо друго освен да добавите данни отдел персонализиран атрибут към съответния HTML елемент по следния начин:

 
 
 Джон Доу 
 
 Джейн Доу 
 

Персонализиран данни-* атрибутите са глобални, точно като клас и документ за самоличност атрибути, така че можете да ги използвате на всеки HTML елемент. Можете също да добавите толкова данни-* атрибути към HTML етикет, както искате. В примера по-горе например можете да въведете нов персонализиран атрибут данни на потребителя да съхранявате потребителски имена на служители.

 
 
 Джон Доу 
 
 Джейн Доу 
 

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

Кога да се използва и кога да не се използват персонализирани атрибути

W3C определя обичай данни-* атрибути като:

“Персонализираните атрибути на данни са предназначени за съхраняване на потребителски данни, които са частни към страницата или приложението, за които няма повече подходящи атрибути или елементи.”

Струва си да обмислите използването данни-* атрибути когато не можете да намерите други семантични атрибути за данните, които искате да съхраните.

Не е най-добрата идея да ги използвате единствено за целите на стила, тъй като можете да избирате от клас и стил атрибути. Ако искате да съхраните тип данни, за които HTML5 има семантичен атрибут, като например Време за среща атрибут за елемент, използвайте това вместо атрибута с префикс на данните.

Важно е да се отбележи това данни-* атрибутите държат данни, които са частна страница или приложението, което означава, че те ще бъдат игнорирани от потребителските агенти, като ботове за търсещи машини и външни приложения. Атрибутите с префикс на данни могат да бъдат достъпни единствено от кода, изпълняван на сайта, на който е разположен HTML.

Персонализиран данни-* атрибутите се използват широко от фронтенд рамки, като например Bootstrap и Zurb Foundation. Добрата новина е, че не е задължително да знаете как да пишете JavaScript, ако искате да използвате атрибути с префикс на данни като част от рамката, тъй като само трябва да ги добавите към HTML кода, за да задействате функционалност на предварително написан плъгин за JavaScript.

Фрагментът по-долу добавя подсказка отляво на бутон в Bootstrap, като използва данни за превключване и данни разположение потребителски атрибути и им присвоява подходящи стойности.

  Подсказка отляво 

Мишена данни-* Атрибути с CSS

Въпреки че не се препоръчва да се използва данни-* атрибути само за стилизиращи цели, можете да изберете HTML елементите, на които принадлежат, с помощта на общите селектори на атрибути. Ако искате да изберете всеки елемент, който има определен атрибут с префикс на данни, използвайте този синтаксис в CSS:

 li [потребител на данни] цвят: син; 

Имайте предвид, че не е потребителските имена, които ще се показват в синьо в кодовия фрагмент по-горе - след като всички данни, съхранявани в персонализираните атрибути, не са видими - но имената на служителите, съдържащи се в

 li [data-department = "IT"] border: плътно синьо 1px; 

 var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap user: "janedoe", отдел: "IT" 

 var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe

 $ ("# jane"). hover (функция () var department = $ ("# jane"). данни ("отдел"); сигнал (отдел););

 var town = $ ("# jane") данни ("град", "Ню Йорк");