Как создать лучший UX с данными HTML5- * Атрибуты
Вы когда-нибудь хотели добавить пользовательские данные к определенному элементу HTML, чтобы впоследствии получить к нему доступ с помощью JavaScript? До появления HTML5 на рынке хранили пользовательские данные, связанные с DOM была настоящая суета, и разработчики должны были использовать все виды неприятных хаков, таких как введение нестандартных атрибутов или использование устаревших setUserData () способ обойти проблему.
К счастью, вам больше не нужно этого делать, так как HTML5 представил новый глобальный данные- * атрибуты которые позволяют встраивать дополнительную информацию в любые элементы HTML. Новые атрибуты data- * делают HTML более расширяемым, поэтому позволяют создавать более сложные приложения и создавать более сложные пользовательские возможности без использования ресурсоемких методов, таких как Ajax-вызовы или запросы к базе данных на стороне сервера.
Подробнее: Дизайн мобильных приложений / Dev – Руководство для начинающих по jQuery Mobile
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Поддержка браузера из новых глобальных атрибутов относительно хорош, так как они поддерживаются всеми современными браузерами (IE8-10 поддерживает их частично).
Синтаксис данных- * Атрибуты
Синтаксис новых атрибутов data- * аналогичен синтаксису атрибутов с префиксом aria. Вы можете вставить любую строчную строку вместо знака *. Вам также необходимо присвоить значение каждому атрибуту в виде строки.
Допустим, вы хотите создать Насчет нас страницы и сохраните название отдела, в котором работает каждый сотрудник. Вам не нужно ничего делать, кроме добавления пользовательского атрибута отдела данных в соответствующий элемент HTML следующим образом:
Джон Доу
Джейн Доу
Пользовательские данные- * атрибуты Глобальныйтак же, как атрибуты class и id, так что вы можете использовать их для каждого элемента HTML. Вы также можете добавить столько атрибутов data- * в тег HTML, сколько хотите. Например, в приведенном выше примере вы можете ввести новый пользовательский атрибут с именем data-user для хранения имен сотрудников.
Джон Доу
Джейн Доу
Как правило, если вы хотите добавить свой собственный атрибут в элемент HTML, вы всегда должны добавлять к нему строку данных. Аналогично, когда вы видите атрибут с префиксом данных в чужом коде, вы можете точно знать, что это пользовательский атрибут, представленный автором.
Когда использовать и когда не использовать пользовательские атрибуты
W3C определяет пользовательские данные- * атрибуты, такие как:
«Пользовательские атрибуты данных предназначены для хранения пользовательских данных, приватных для страницы или приложения, для которых больше нет подходящих атрибутов или элементов».
Стоит рассмотреть возможность использования атрибутов data- *, когда вы не можете найти другие семантические атрибуты для данных, которые вы хотите сохранить.
Не лучшая идея использовать их исключительно для стилизации, так как для этого вы можете выбирать из класса и атрибутов стиля. Если вы хотите сохранить тип данных, для которого HTML5 имеет семантический атрибут, такой как Дата и время атрибут для элемент, используйте его вместо атрибута с префиксом данных.
Важно отметить, что атрибуты data- * содержат данные, которые являются частными для страницы или приложения, что означает, что они будут игнорироваться пользовательские агенты, таких как поисковые роботы и внешние приложения. Атрибуты с префиксом данных могут быть доступны только с помощью кода, запущенного на сайте, на котором размещен HTML.
Настраиваемые атрибуты data- * широко используются средами внешнего интерфейса, такими как начальная загрузка а также Zurb Foundation, также. Хорошей новостью является то, что вам не обязательно нужно знать, как писать JavaScript, если вы хотите использовать атрибуты с префиксом данных как часть платформы, так как вам нужно только добавить их в код HTML, чтобы вызвать функциональность предварительно написанный плагин JavaScript.
Фрагмент кода ниже добавляет всплывающая подсказка слева для кнопки в Bootstrap, используя настраиваемые атрибуты переключения данных и размещения данных и присваивая им соответствующие значения.
Подсказка слева
Целевые данные- * Атрибуты с CSS
Хотя не рекомендуется использовать атрибуты data- * только для стилизации, вы можете выбрать элементы HTML, к которым они относятся, с помощью общих селекторы атрибутов, Если вы хотите выбрать каждый элемент, который имеет определенный атрибут с префиксом данных, используйте этот синтаксис в вашем CSS:
литий[data-user] {
цвет синий;
}
Обратите внимание, что в приведенном выше фрагменте кода не имена пользователей будут отображаться синим цветом – после того, как все данные, хранящиеся в пользовательских атрибутах, не видны, – а имена сотрудников, содержащиеся в
Если вы хотите выбрать только те элементы, в которых атрибут с префиксом данных принимает определенное значение, используйте следующий синтаксис:
литий[data-department=”IT”] {
рамка: сплошная синяя 1px;
}
Вы можете использовать все более сложные селекторы атрибутов CSS, такие как общий селектор комбинатора ([data-value~=”foo”]) или селектор подстановочного знака ([data-value*=”foo”]), а также с префиксом данных.
Доступ к данным – * Атрибуты с помощью JavaScript
Вы можете получить доступ к данным, хранящимся в пользовательских атрибутах data- *, с помощью JavaScript, используя Набор данных собственность, или JQuery’s данные() метод.
Ванильный JavaScript
Набор данных собственность является собственностью HTMLElement интерфейс, это означает, что вы можете использовать его на любой тег HTML. Свойство набора данных предоставляет доступ ко всем настраиваемым атрибутам data- * данного элемента HTML. Атрибуты возвращаются как DOMStringMap объект, который содержит одну запись для каждого атрибута data- *.
В нашем Насчет нас Пример страницы. Вы можете легко проверить пользовательские атрибуты, которые есть у «Джейн Доу», используя свойство набора данных следующим образом:
var jane = document.getElementById (“jane”);
console.log (jane.dataset);
// DOMStringMap {пользователь: “janedoe”, отдел: “IT”}
Вы можете видеть, что в возвращенном объекте DOMStringMap префиксы данных удаляются из имен атрибутов (пользователь вместо данных-пользователь и отдел вместо отдела данных). Вам нужно использовать атрибуты в том же формате, если вы хотите получить доступ только к значению определенного атрибута с префиксом данных (вместо списка всех пользовательских атрибутов, как в приведенном выше фрагменте кода).
Вы можете получить значение определенного атрибута data- * как свойство свойства набора данных. Как я упоминал ранее, вам нужно пропустить префикс данных в имени свойства, поэтому, если вы хотите получить доступ к значению атрибута data-user Джейн, вы можете сделать это следующим образом:
var jane = document.getElementById (“jane”);
console.log (jane.dataset.user)
// Джейн Доу
Метод данных jQuery
данные() Метод jQuery позволяет получить значение атрибута с префиксом данных. Здесь вы также должны опустить префикс данных в имени атрибута для правильного доступа к нему. В нашем примере вы можете отобразить предупреждающее сообщение с названием отдела, в котором «Jane» работает со следующим кодом:
$ (“# jane”). hover (function () {
var отдела = $ (“# jane”). data (“отдел”);
оповещения (департамент);
});
Метод data () необходимо использовать осторожно, поскольку он не только служит средством получения значения атрибута с префиксом данных, но и присоединяет данные к элементу DOM следующим образом:
var town = $ (“# jane”). data (“town”, “New York”);
Дополнительные данные, которые вы присоединяете с помощью метода jQuery data (), очевидно, не будут отображаться в коде HTML как новый атрибут data- *, поэтому, если оба метода используются одновременно, данный элемент HTML будет хранить два набора данных, один с HTML, а другой с JQuery.
В нашем примере «Jane» получила новые пользовательские данные («городок») с помощью jQuery, но эта новая пара ключ-значение не будет отображаться в HTML как новый атрибут data-town. Хранение данных двумя различными способами не является лучшей практикой, если не сказать больше, поэтому используйте только один из двух методов одновременно.
Доступность и данные- * Атрибуты
Поскольку данные, хранящиеся в пользовательских атрибутах data- *, являются частными, вспомогательные технологии могут не иметь доступа к ним. Если вы хотите, чтобы ваш контент был доступен для пользователей с ограниченными возможностями, не рекомендуется хранить контент, который может быть важен для пользователей таким образом.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
