Пользовательские атрибуты

Что такое пользовательские атрибуты?

Пользовательские атрибуты (Custom Attributes или Data Attributes) — это дополнительные поля, которые располагаются в HTML и используются для хранения разных данных. С помощью написанных кодом скриптов можно обращаться к этим данным и управлять визуальной логикой на сайте.

Пользовательские атрибуты полезны в проектах, где требуется:

  • передача данных в JavaScript-скрипты
  • кастомизация поведения элементов (например, data-фильтры, aria-метки и пр.)
  • управление анимациями, слайдерами, всплывающими окнами и таймерами
  • фильтрация и сортировка контента
  • интеграции с внешними библиотеками и сервисами
  • улучшение SEO и доступности (например, с помощью aria-атрибутов)

Пример:

На сайте нужно сделать калькулятор стоимости разработки проекта, в котором пользователь будет выбирать тип сайта (Лендинг или Многостраничник) и тип услуги (Дизайн и/или Верстка).

  1. Нужно сверстать калькулятор и каждому варианту назначить свой атрибут и значение.

  2. После этого с помощью кода можно обращаться к нужным атрибутам и прописывать логику расчета стоимости.

Другие примеры использования:

  • квизы

  • слайдеры

  • таймеры

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

В Taptop вы можете добавлять пользовательские атрибуты для элементов прямо в визуальном редакторе — для каждого выделенного элемента на холсте.

  1. Выделите нужный элемент на холсте или в слоях и перейдите в Настройки (Settings) на правой панели.
  2. Найдите раздел Пользовательские атрибуты (Custom Attributes) и нажмите на кнопку «+», чтобы добавить новый атрибут.

  1. Укажите имя атрибута в поле «Название» (Name) (обязательное поле).

  • Допустимы латинские буквы, цифры, символы “_”, “-”.
  • Название должно начинаться с буквы.

Примеры: data-filter, aria-label, disabled

Важно: Нельзя использовать следующие атрибуты:

  • атрибуты, которые доступны для редактирования в настройках соответствующих виджетов или на панели стилей
  • системные: id, action, method, data-do
  • обработчики событий: onclick, onmouseover и т.п.;
  • внутренние зарезервированные префиксы: mosaic*, taptop*, tt*.

  1. Укажите Значение (Value) (опционально). В некоторых случаях атрибуты работают без значения, например autofocus или disabled.

5. Нажмите кнопку Добавить атрибут.

Готово! Атрибут добавлен к элементу.

Управление атрибутами

  • Чтобы отредактировать атрибут, просто кликните по нему в списке.
  • Чтобы удалить атрибут, нажмите на кнопку «–» рядом с ним.

Примеры использования

Пример 1. Управление доступностью (доступ для скринридеров)

Задача: Улучшить доступность сайта для пользователей с ограничениями зрения.

Решение: Добавляем aria-атрибуты.

Как настроить:

  1. Выделите элемент, например, иконку или кнопку без текста.
  2. Добавьте атрибут:

  • Название: aria-label
  • Значение: Открыть меню

Скринридер сможет прочитать назначение кнопки, даже если оно не видно на экране.

Пример 2. Автофокус на поле ввода при загрузке страницы

Задача: Установить фокус на поле формы сразу после загрузки страницы.

Решение: Используем атрибут autofocus.

Как настроить:

  1. Выделите поле ввода (Input).
  2. Добавьте атрибут:

  • Название: autofocus
  • Значение: оставить пустым

При загрузке страницы курсор сразу окажется в этом поле.

Преимущества пользовательских атрибутов

  • Пользовательские атрибуты — это мощный функционал по управлению визуальной логикой на сайте.
  • С помощью пользовательских атрибутов разработчикам становится значительно проще писать модификации функционала для своих проектов.