[custom-classes] — классы, которые будут добавлены элементу .modal после генерации модального окна на основе шаблона. [modal-window-classes] — классы, которые будут добавлены элементу .modal-window после генерации модального окна на основе шаблона. .uniq — класс, закрывающий все открытые окна при открытии данного окна, добавляется в [custom-classes]. .hash — если класс добавлен в [custom-classes], окна, открываясь, будут добавлять хэш в конец адресной строки. Также при загрузке страницы с хэшем модального окна, оно автоматически будет открываться.
После инициализации, шаблон модального окна преобразуется в готовый код, который добавляется в конце страницы перед </body>. Если это поведение необходимо изменить, добавьте класс .modal-here элементу, в который вы хотите инициализировать модальные окна.
Код инициализированного модального окна:
<div id="myModal" class="modal [custom-classes]"> <div class="modal-overlay"></div> <div class="modal-outer"> <div class="modal-inner"> <div class="modal-window [modal-window-classes]"> ... Содержимое, которое было внутри тега с классом .modal-content ... <div class="modal-rail"> <a role="button" class="modal-close"></a> </div> </div> </div> </div></div>
Указывает id элемента, позицию которого мы отслеживаем при прокрутке. При отсутствии triggerId триггером является сам анимированный элемент.
start
string
Точка начала анимации (расстояние от верха окна в px, vh или %). Обязательный
end
string
Точка окончания анимации (расстояние от верха окна в px, vh или %). Обязательный
functionName
string
Название глобальной функции, которая выполняется при перемещении отлеживаемого элемента между точками начала и окончания анимации. Функция получает объект с параметром progress, который изменяется от 0 до 1. Обязательный
class
string
Класс, добавляемый к анимированному элементу, когда он находится в процессе анимации.
classRemove
bool
false
Удалять или нет класс, установленный предыдущим параметром после окончания анимации.
Если анимация производится в отдельном прокручиваемом элементе, нужно добавить этому элементу класс .animate-scrollarea.
Примеры
Sheets
Создает табы с содержимым.
Шаблон:
<div class="sheets"> <a class="sheets-tab active" data-sheet="sheetA">Таб A</a> <a class="sheets-tab" data-sheet="sheetB">Таб B</a> <div id="sheetA" class="sheets-body active"> Содержимое таба A </div> <div id="sheetB" class="sheets-body"> Содержимое таба B </div></div>
Первый таб в шаблоне активен по умолчанию, для этого добавлен класс .active.
Табы и их содержимое можно свободно вкладывать в другие теги в пределах .sheets.
Загрузка данных при прокрутке до элемента. Можно использовать как бесконечную прокрутку, добавив элемент в конце списка и подгружая в него данные, по мере его появления.
При появлении блока с data-loadmore в границах экрана, будет выполнена функция, имя который указано в functionName. Функции будет передан параметр page, значение которого увеличивается с каждым вызовом.
Остановить выполнение функции можно методом:
auto.loadmore.unwatch()
Параметры вызова
Параметр
Формат
По умолчанию
Описание
functionName
string
Имя функции, которую нужно выполнить. Обязательный
offset
int
0
Смещение выполнения за границу экрана. Например, если указать 100, то функция выполнится, когда до появления элемента на экране останется 100 и менее пикселей.
Если анимация производится в отдельном прокручиваемом элементе, нужно добавить этому элементу класс .animate-scrollarea.
Lazyload
Отложенная загрузка изображений.
В настоящее время большинство браузеров поддерживает нативную «ленивую загрузку» loading="lazy", используйте данный плагин только в случае крайней необходимости. Например, иногда нужно отследить загрузилось ли изображение.
После загрузки изображения с классом .lazyload, к нему добавится класс .loaded.
Appear
Добавляет классы .appeared и .visible на элементе, появившемся в зоне видимости.
Пример использования:
<div class="isAppeared">...</div>
Когда элемент появится в зоне видимости, к нему добавятся 2 класса, .appeared и .visible. Класс .appeared останется навсегда, а класс .visible удалится при исчезновении элемента из зоны видимости.
Hover
Синхронизирует наведение .hover у отдельно расположенных элементов, имеющих общую ссылку. Для активации элементам нужно добавить класс .syncHover.
В данном примере при наведении на фото или название товара, обоим элементам <a> добавится класс .hover, так как у них одинаковая ссылка. Данный метод часто позволяет избежать нарушений в семантике, не оборачивая весь блок в тег <a>.
Device
Определяет устройство и браузер пользователя.
Использование:
if (auto.device.[name]) { ... }
name — значения для проверки.
Браузеры: ie, firefox, safari, webkit, chrome, opera
ОС и устройства: windows, macos, linux, ios, ipad, ipod, iphone, android
Мобильность: mobile, desktop
Поддержка js: js
Последовательное переключение классов. Иногда удобно использовать, когда требуется задержка, пока не завершится анимация. По очереди запускает addClass и removeClass.
auto.lib.makePassword(length, selector)
Создает пароль указанной длины (по умолчанию — 8).
Если созданный пароль сразу нужно вставить в поле input или textarea, вы можете указать выражение для querySelector этого поля в переменной selector.
Отложенное выполнение кода. Анонимная функция с кодом () => { code } будет запущена через время delay (по умолчанию 10 с), либо по наступлении одного из событий: scroll, resize, click, keydown, mouseover, touchmove.
Пример:
auto.lib.deffered( () => { Code... }, 10000)
auto.lib.runOnAppear(selector, callback, options)
Выполнение кода при его появлении во Viewport (по умолчанию ближе чем за 100px за Viewport). Анонимная функция с кодом () => { code } будет запущена при приближении указанного блока к Viewport.
Пример:
auto.lib.runOnAppear( '.css_selector', () => { Code... }, options (не обязательно))
auto.lib.isEmail(email)
Определяет валидность адреса электропочты.
auto.lib.alertErrors(data)
Показывает алерт с ошибками. data — объект (ключ: значение), массив или строка.
Каждая ошибка будет выведена с новой строки (разделены \n).
auto.lib.printErrors(data)
Печатает ошибки. data — объект (ключ: значение), массив или строка.
Каждая ошибка будет выведена с новой строки (разделены <br/>).
Form
Полезные утилиты для интерактивности форм.
Добавляют возможность устанавливать значения полей input, textarea и select, вызывая события, которые далее можно обработать. Таким образом можно связывать поля форм необходимыми функциями. Например динамический расчет суммы, введенной в поля и другие.
