Как начать пользоваться?
- Ознакомиться с функционирующей панелью на данной странице.
- Прочитать описание работы панели ниже.
- Ознакомиться с версткой панели. По желанию можно изменить формулировки или состав и порядок управляющих элементов.
- Добавить в свой проект готовые к релизу файлы
css, js(или их минифицированные варианты), либо включить файлы.scss, source.jsв свою сборку frontend.
Что делает панель ВДС?
При изменении настроек панели она меняет data-* атрибуты у тега html в зависимости от выбранных значений управляющих элементов панели.
Именем data-* атрибута становится имя выбранного управляющего элемента input[type="radio"] из соответствующей группы. Так, например, если выбран , то для тега html добавится атрибут data-fontsize="very-large".
Обратите внимание, что панель сама по себе только сохраняет и восстанавливает конфигурацию и выставляет ее в виде data-* атрибутов тега html, но никак не оказывыает прямого влияния на визульное отображение страницы. Для реализации ответной реакции интерфейса на изменение конфигурации, вы можете поспользоваться предоставляемой нами конфигурацией, или же написать свое поведение интерфейса для своего проекта.
Выбранное состояние панель сохраняет в localStorage (локальное хранилище) вашего браузера и восстанавливает его сразу же, как новая страница загружается. Мы рекомендуем включить выполнение JavaScript панели ВДС сразу же после верстки панели, не дожидаясь окончательной загрузки DOM, чтобы в момент загрузки DOM и выполнения других скриптов панель уже восстановила свое состояние и пользователь сразу видел страницу в той конфигурации, которая у него выбрана в панели.
Панель ВДС поддерживает браузеры, начиная с IE 9+
Ссылки для загрузок
Файл стилей – wcag-panel.css
Минифицированный файл стилей – wcag-panel.min.css
Файл стилей оформленный в препроцессоре SASS – wcag-panel.scss
Скрипт для компонента – wcag-panel.js
Минифицированный скрипт для компонента – wcag-panel.min.js
Исходный скрипт для компонента – wcag-panel.source.js