Как создать лучший 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-отдела = "IT"] граница: сплошной синий 1px;
Вы можете использовать все более сложные селекторы атрибутов CSS, такие как общий селекторный комбинатор ([Данные значение ~ = "Foo"]) или селектор подстановочного знака ([Данные значение * = "Foo"]), а также с префиксом данных.
Доступ данные-* Атрибуты с JavaScript
Вы можете получить доступ к данным, хранящимся в пользовательских данные-* атрибуты с помощью JavaScript, используя либо свойство набора данных, либо jQuery's данные() метод.
Ванильный JavaScript
Набор данных собственность является собственностью HTMLElement интерфейс, это означает, что вы можете использовать его на любой тег HTML. Набор данных свойство дает доступ ко всем обычаям данные-* атрибуты данного элемента HTML. Атрибуты возвращаются как DOMStringMap объект, который содержит одну запись для каждого данные-* атрибут.
В нашем Насчет нас Пример страницы вы можете легко проверить пользовательские атрибуты “Джейн Доу” с помощью Набор данных Свойство следующим образом:
var jane = document.getElementById ("jane"); console.log (jane.dataset); // DOMStringMap пользователь: "janedoe", отдел: "IT" Вы можете видеть, что в возвращенном DOMStringMap возражать данные- префиксы удаляются из названий атрибутов (пользователь вместо данных пользователя, а также отдел вместо данных отдел). Вам нужно использовать атрибуты в том же формате, если вы хотите получить доступ только к значению определенного атрибута с префиксом данных (вместо списка всех пользовательских атрибутов, как в приведенном выше фрагменте кода).
Вы можете получить значение определенного данные-* атрибут как свойство Набор данных имущество. Как я уже упоминал ранее, вы должны опустить данные- префикс из имени свойства, поэтому, если вы хотите получить доступ к значению Джейн данных пользователя атрибут, вы можете сделать это следующим образом:
var jane = document.getElementById ("jane"); console.log (jane.dataset.user) // janedoe JQuery-х данные() метод
данные() Метод jQuery позволяет получить значение атрибута с префиксом данных. Здесь вы также должны опустить данные- префикс из имени атрибута для доступа к нему должным образом. В нашем примере вы можете отобразить предупреждающее сообщение с названием отдела, где “Джейн” работает со следующим кодом:
$ ("# jane"). hover (function () var Department = $ ("# jane"). data ("отдела"); оповещение (отдел);); данные() Метод необходимо использовать осторожно, так как он не только служит средством получения значения атрибута с префиксом данных, но и присоединяет данные к элементу DOM следующим образом:
var town = $ ("# jane"). data ("town", "New York"); Дополнительные данные, которые вы прикрепляете с помощью jQuery's данные() метод явно не будет отображаться в коде HTML как новый данные-* атрибута, поэтому, если оба метода используются одновременно, данный элемент HTML будет хранить два набора данных, один с HTML, а другой с jQuery.
В нашем примере “Джейн” получил новые пользовательские данные ("городок") с jQuery, но эта новая пара ключ-значение не будет отображаться в HTML как новая данных города приписывать. Хранение данных двумя различными способами - не самая лучшая практика, если не сказать больше, поэтому использовать только один из двух методов одновременно.
Доступность и данные-* Атрибуты
Как данные хранятся в обычае данные-* Атрибуты являются частными, вспомогательные технологии могут не иметь доступа к ним. Если вы хотите, чтобы ваш контент был доступен для пользователей с ограниченными возможностями, не рекомендуется хранить контент, который может быть важен для пользователей таким образом.
