Пользовательские атрибуты
Что такое пользовательские атрибуты?
Пользовательские атрибуты (Custom Attributes или Data Attributes) — это дополнительные поля, которые располагаются в HTML и используются для хранения разных данных. С помощью написанных кодом скриптов можно обращаться к этим данным и управлять визуальной логикой на сайте.
Пользовательские атрибуты полезны в проектах, где требуется:
- передача данных в JavaScript-скрипты
- кастомизация поведения элементов (например, data-фильтры, aria-метки и пр.)
- управление анимациями, слайдерами, всплывающими окнами и таймерами
- фильтрация и сортировка контента
- интеграции с внешними библиотеками и сервисами
- улучшение SEO и доступности (например, с помощью aria-атрибутов)
Пример:
На сайте нужно сделать калькулятор стоимости разработки проекта, в котором пользователь будет выбирать тип сайта (Лендинг или Многостраничник) и тип услуги (Дизайн и/или Верстка).
-
Нужно сверстать калькулятор и каждому варианту назначить свой атрибут и значение.
-
После этого с помощью кода можно обращаться к нужным атрибутам и прописывать логику расчета стоимости.
Другие примеры использования:
-
квизы
-
слайдеры
-
таймеры
Как добавить пользовательский атрибут
В Taptop вы можете добавлять пользовательские атрибуты для элементов прямо в визуальном редакторе — для каждого выделенного элемента на холсте.
- Выделите нужный элемент на холсте или в слоях и перейдите в Настройки (Settings) на правой панели.
- Найдите раздел Пользовательские атрибуты (Custom Attributes) и нажмите на кнопку «+», чтобы добавить новый атрибут.
- Укажите имя атрибута в поле «Название» (Name) (обязательное поле).
- Допустимы латинские буквы, цифры, символы “_”, “-”.
- Название должно начинаться с буквы.
Примеры: data-filter
, aria-label
, disabled
Важно: Нельзя использовать следующие атрибуты:
- атрибуты, которые доступны для редактирования в настройках соответствующих виджетов или на панели стилей
- системные:
id
,action
,method
,data-do
- обработчики событий:
onclick
,onmouseover
и т.п.; - внутренние зарезервированные префиксы:
mosaic*
,taptop*
,tt*
.
- Укажите Значение (Value) (опционально). В некоторых случаях атрибуты работают без значения, например
autofocus
илиdisabled
.
5. Нажмите кнопку Добавить атрибут.
Готово! Атрибут добавлен к элементу.
Управление атрибутами
- Чтобы отредактировать атрибут, просто кликните по нему в списке.
- Чтобы удалить атрибут, нажмите на кнопку «–» рядом с ним.
Примеры использования
Пример 1. Управление доступностью (доступ для скринридеров)
Задача: Улучшить доступность сайта для пользователей с ограничениями зрения.
Решение: Добавляем aria-атрибуты.
Как настроить:
- Выделите элемент, например, иконку или кнопку без текста.
- Добавьте атрибут:
- Название:
aria-label
- Значение:
Открыть меню
Скринридер сможет прочитать назначение кнопки, даже если оно не видно на экране.
Пример 2. Автофокус на поле ввода при загрузке страницы
Задача: Установить фокус на поле формы сразу после загрузки страницы.
Решение: Используем атрибут autofocus.
Как настроить:
- Выделите поле ввода (Input).
- Добавьте атрибут:
- Название:
autofocus
- Значение: оставить пустым
При загрузке страницы курсор сразу окажется в этом поле.
Преимущества пользовательских атрибутов
- Пользовательские атрибуты — это мощный функционал по управлению визуальной логикой на сайте.
- С помощью пользовательских атрибутов разработчикам становится значительно проще писать модификации функционала для своих проектов.