Як побудувати краще UX за допомогою даних HTML5 - * Атрибути
Ви коли-небудь хотіли додати власні дані до певного елемента HTML, щоб пізніше отримати доступ до нього за допомогою JavaScript? До появи HTML5 на ринку зберігання користувальницьких даних, пов'язаних з DOM, було справжньою метушнею, і розробникам доводилося використовувати всілякі неприємні хакі, такі як введення нестандартних атрибутів або використання застарілого методу setUserData () для вирішення проблеми.
На щастя, вам більше не потрібно це робити, оскільки HTML5 представив новий глобальний дані- * атрибути, які дозволяють вбудовувати додаткову інформацію на будь-які елементи HTML. Новий дані- * атрибути зробити HTML більш розширюваним, тому дозволяють створювати більш складні програми, і створити більш складний користувальницький досвід без використання ресурсомістких методів, таких як Ajax-виклики, або серверні запити на бази даних.
Підтримка веб-переглядача нових глобальних атрибутів є відносно гарною, оскільки підтримується всіма сучасними браузерами (IE8-10 частково їх підтримує).
Синтаксис дані- * Атрибути
Синтаксис нового дані- * атрибути аналогічні атрибутам з арією. Можна вставити будь-яку нижню рядок замість * знак. Також потрібно призначити кожному атрибуту значення у вигляді рядка.
Припустимо, ви хочете створити Про нас і зберігати назву відділу, де працює кожен працівник. Ви не повинні робити нічого іншого, окрім додавання відділ даних спеціальний атрибут до відповідного елемента HTML таким чином:
- Джон Доу
- Джейн Доу
Користувальницькі дані- * атрибути глобальні, як і клас і id атрибути, тому їх можна використовувати на кожному елементі HTML. Ви також можете додати стільки дані- * атрибути до тега HTML, як ви хочете. У наведеному вище прикладі, наприклад, ви можете ввести новий званий атрибут користувач даних зберігати імена користувачів.
- Джон Доу
- Джейн Доу
Як правило, якщо ви хочете додати свій власний атрибут до елемента HTML, вам завжди доведеться його префікс даних- рядок. Аналогічно, коли ви бачите атрибут префіксу даних в іншому коді, ви можете знати напевно, що це введений автор.
Коли використовувати і коли не використовувати спеціальні атрибути
W3C визначає звичай дані- * такі атрибути:
“Спеціальні атрибути даних призначені для збереження приватних даних на сторінці або додатку, для яких немає більш адекватних атрибутів або елементів.”
Варто розглянути можливість використання дані- * атрибути якщо ви не можете знайти будь-які інші семантичні атрибути для даних, які потрібно зберегти.
Це не найкраща ідея використовувати їх виключно для цілей укладання, оскільки ви можете вибрати з клас і стиль атрибути. Якщо потрібно зберегти тип даних, для якого HTML5 має семантичний атрибут, наприклад, дата, час атрибут для елемента, використовуйте його замість атрибута з префіксом даних.
Важливо відзначити це дані- * атрибути зберігають дані, які є приватна сторінка або програма, це означає, що вони будуть ігноруватися агентами користувача, такими як боти пошукових систем і зовнішніми додатками. Атрибути з префіксом даних можна отримати лише за допомогою коду, запущеного на сайті, на якому розміщено HTML.
Користувальницькі дані- * атрибути широко використовуються фронтендними рамками, такими як Bootstrap і Zurb Foundation, а також. Доброю новиною є те, що вам не обов'язково знати, як писати JavaScript, якщо ви хочете використовувати атрибути з префіксом даних як частину фреймворку, оскільки вам потрібно лише додати їх до HTML-коду, щоб викликати функціональність попередньо написаний модуль JavaScript.
Фрагмент коду нижче додає підказку зліва до кнопки в Bootstrap, використовуючи перемикання даних і розміщення даних користувальницьких атрибутів і призначення їм відповідних значень.
Ціль дані- * Атрибути з CSS
Хоча це не рекомендується використовувати дані- * атрибути тільки для цілей стилізації, ви можете вибрати HTML-елементи, яким вони належать, за допомогою загальних селекторів атрибутів. Якщо ви хочете вибрати кожен елемент, який має певний атрибут з префіксом даних, використовуйте цей синтаксис у вашому CSS:
li [data-user] колір: синій;
Зауважте, що це не імена користувачів, які відображатимуться синім кольором у фрагменті коду вище - після того, як дані, збережені в користувацьких атрибутах, не відображаються, - але імена співробітників, що містяться в елементи (у прикладі “Джон Доу” і “Джейн Доу”).
Якщо ви бажаєте лише вибрати елементи, в яких атрибут префікс даних має певне значення, це синтаксис для використання:
li [data-department = "IT"] border: твердий синій 1px;
Ви можете використовувати всі більш складні селектори атрибутів CSS, такі як селектор об'єднань загального sibling ([data-value ~ = "foo"]) або селектор підстановки ([data-value * = "foo"]), а також атрибути з префіксом даних.
Доступ дані- * Атрибути з JavaScript
Ви можете отримати доступ до даних, що зберігаються в користувальницькому режимі дані- * атрибути з JavaScript, використовуючи властивість набору даних або jQuery дані () метод.
Ванільний JavaScript
The набору даних майно є власністю HTMLElement інтерфейс, тобто ви можете використовувати його на будь-якому тезі HTML. The набору даних майно надає доступ до всіх звичаїв дані- * атрибути даного елемента HTML. Атрибути повертаються як DOMStringMap об'єкт, який містить один запис для кожного дані- * атрибут.
В нашому Про нас Наприклад, ви можете легко перевірити власні атрибути “Джейн Доу” має за допомогою набору даних майно таким чином:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap user: "janedoe", відділ: "IT" Ви можете побачити, що у повернутому DOMStringMap об'єкт даних- префікси видаляються з назв атрибутів (користувача замість користувач даних, і відділ замість відділ даних). Необхідно використовувати атрибути в тому ж форматі, якщо ви бажаєте отримати доступ лише до певного атрибуту з префіксом даних (замість списку всіх власних атрибутів, як у фрагменті коду вище).
Ви можете отримати значення конкретного дані- * атрибут як властивість набору даних власності. Як я вже згадував раніше, потрібно пропустити даних- префікс від імені властивості, так що якщо ви хочете отримати доступ до значення Jane користувач даних атрибут, ви можете зробити це таким чином:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe jQuery's дані () метод
The дані () Метод jQuery дозволяє отримати значення атрибута з префіксом даних. Тут ви також повинні пропустити даних- префікс від імені атрибута для належного доступу до нього. У нашому прикладі можна відобразити повідомлення з назвою відділу, де “Джейн” працює з таким кодом:
$ ("# jane"). hover (функція () var department = $ ("# jane"). data ("відділ"); alert (департамент);); The дані () Метод потрібно використовувати обережно, оскільки він не тільки діє як засіб для отримання значення атрибута з префіксом даних, але й для приєднання даних до елемента DOM таким чином:
var town = $ ("# jane") дані ("місто", "Нью-Йорк"); Додаткові дані, які ви додаєте з jQuery дані () метод, очевидно, не з'явиться в HTML-коді як новий дані- * атрибут, тому, якщо обидві методи використовуються одночасно, даний елемент HTML буде зберігати два набори даних, один з HTML, а інший з jQuery.
У нашому прикладі “Джейн” отримали нові спеціальні дані ("місто") з jQuery, але ця нова пара ключ-значення не з'явиться в HTML як нова дані міста атрибут. Зберігання даних двома різними способами - це не найкраща практика, щоб сказати найменше використовувати лише один з двох методів одночасно.
Доступність і дані- * Атрибути
Як свідчать дані в митниці дані- * атрибути є приватними, допоміжні технології можуть не мати доступу до них. Якщо ви хочете, щоб ваш вміст був доступний для користувачів з обмеженими можливостями, не рекомендується зберігати вміст, який може бути важливим для користувачів таким чином.
