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

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

Пользовательские атрибуты (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

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

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

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

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

С помощью пользовательских атрибутов разработчикам становится значительно проще писать модификации функционала для своих проектов.