Триггеры

Триггеры – это функционал, который позволяет элементам реагировать на события на странице. А именно, вы можете изменять свойство элемента (ов) при определенных действиях над другими элементами. Например, у вас есть два элемента А и В. С помощь. Триггеров вы сможете изменить месторасположения (или другие свойства) элемента В, когда кликнули мышью на элемент А.

1 - Используйте данную кнопку, если хотите создать новый триггер
2- Или, если необходимо, выберите уже созданный ранее триггер

Создание нового триггера

При создании нового триггера и редактировании старого, перед вами появится окно, где вы сможете настроить его параметры.

1 – Укажите название вашего триггера. Название необходимо только для вашего удобства и дальнейшего поиска данного триггера среди других. Старайтесь давать информативные названия, так как на сложных страницах обычно используется очень много триггеров и “случайные” название в дальнейшем усложнят вам работу.
2 – Задержка триггера. Укажите необходимую задержку, если хотите, что бы триггер сработал не сразу, после выполнения нужного условия для его активации. Задержка указывается в миллисекундах
3 – Выберите событие, которое запустит триггер.

Существует несколько видов событий:
Клик – пользователю необходимо будет кликнуть мышью на указанный в следующем поле (4) элемент, что бы запустить триггер.
Двойной клик – необходимо будет произвести двойной клик по элементу
Курсор появился над элементом – триггер запустится в тот момент, когда курсор мыши появится над элементом.
Курсор покинул элемент – триггер запустится в тот момент, когда курсор мыши покинет рамки элемента.
Страница загружена – произошла полная загрузка страница пользователем в браузере
При скроле окна – триггер сработает, когда пользователь прокрутит страницу на определенное расстояние.
Условие и расстояние прокрутки страницы указываются в этих полях. Что бы вам было понятней, как правильно настроить данную опцию, посмотрите на схему ниже. Как видно из схемы, расстояние может учитываться не только в пределах окна браузера, но и за его пределами. Пользовательское событие – этот функционал является более сложным в понимании и советуем его использовать, если понимаете, чего именно хотите им добиться. Пользовательское событие нужно для того чтобы можно было вызвать один триггер из другого триггера, а также для взаимодействия с JavaScript кодом.

4 - Цели (элементы запускающие триггер) В целях вам необходимо указать те элементы, над которыми необходимо произвести одно из действий (из пункта 3), что бы запустить триггер. Существует два способа указать нужные элементы:

С помощью кнопки добавления текущего (выбранного в редакторе) элемента. Для этого выберите нужный элемент в редакторе и просто нажмите на данную кнопку. Элемент(ы) тут же будет добавлен(ы) к целям.

Задать селекторы вручную, с помощью кнопки “Ручной ввод”. Если нужно указать несколько селекторов, то каждый новый, требуется указывать с новой строки. Первый способ - это CSS селекторы, что бы скопировать их, можно воспользоваться соответствующей кнопкой, а так же их можно указать вручную. Второй способ - это расширенные возможности селекторов (он требует более высоких навыков, стоит применять только если понимаете, как его использовать ). Например, если селектор начинается со знака "$" то он интерпретируется как JS код, это позволяет использовать для выбора элементы jQuery, код должен возвращать коллекцию jQuery элементов.
Например, $$('.className').parent() - выберет все элементы внутри, которых есть элементы с классом "className".
Также в селекторах можно использовать специальную переменную "$this" указывающую на тот элемент, который вызвал событие, например, создаём триггер "при клике" на элементы с классом "className" (т.е. указываем в левой части селектор ".className") при срабатывании триггера добавляем/удаляем класс "checked" (меняющий элементу фон) этому же элементу (элементу с классом "className" по которому совершили клик) т.е. в правой части указываем селектор "$this" в итоге получаем элемент похожий на checkbox. При клике на одном из элементов с классом "className" переменная "$this" будет указывать именно на тот элемент по которому кликнули т.е. благодаря этому для совершения действия триггера будет выбран именно тот элемент с классом "className" по которому кликнул пользователь.

5 – Единичный запуск триггера Свойство, которое позволяет настроить триггер таким образом, чтобы он запускался только 1 раз и не запускался снова при повторении определенного для него действия. 6 – Действия
В данном списке, вам необходимо выбрать действие, которые триггер совершит над элементом (ами), которые укажите ниже. Действие выполнится после того, как будут выполнены условия, для запуска триггера (пункт 3 и 4). Некоторые действия работают только для определенных типов элементов, а полный список отображается по причине того, что нельзя изначально определить, какие элементы будут выбраны селектором цели. Действия могут быть следующими:
Скрыть элемент – полностью скрывает элемент
Показать – показывает элемент, если он был скрыт
Скрыть / Показать – скрывает элемент, а затем вновь показывает его при повторном действии
Добавить класс – добавляет класс к выбранным элементам.
В этом случае нужно указать имя CSS класса, который будет добавлен. Удалить класс – удаляет указанный класс
Добавить или удалить класс – добавляет или удаляет класс в зависимости от того есть у элемента этот класс или нет.
Установить текст – Добавляет или изменяет текст для элемента. (Применимо к виджету “текст”)
Выбрать элемент и выбрать элемент № - применяется для табов и слайдеров, что бы выбрать нужный слайд или элемент.
Переключить на предыдущий элемент и переключить на следующий элемент – действие так же применимо к табам и слайдерам для того, что бы переключаться на предыдущий или следующий элемент.
Раскрыть список и скрыть список – применяются для выпадающих списком, что их сворачивания и разворачивания
Раскрыть / скрыть список – скрывает или раскрывает выпадающий список в зависимости от текущего состояния(раскрыт/скрыт) списка
Клик – производит программный клик по указанным элементам
Двойной клик – производится двойной клик по указанным элементам
Послать событие – посылает пользовательское событие
Перейти по адресу – браузер переходит по указанной ссылке, после выполнения условий для запуска триггера.
Открыть в новой вкладке – открывает ссылку в новой вкладке
Важно! Большинство современных браузеров блокируют любые переходы по другому адресу, если они вызваны чем то, кроме клика пользователя, поэтому рекомендуется использовать последние 2 действий только с событием при клике или двойном клике. Так же переход по ссылке в этом случае осуществляется с помощью JS функций, что может быть проигнорировано поисковыми системами с точки зрения SEO параметра. А именно: - Поисковики не понимают что клик по этому элементу вызовет переход на какойто дроугой ресурс т.е. они не воспринимают это как ссылку они просто не в состоянии это сделать - При переходе на новый адрес в запросе браузер устанавливает заголовок указывающий с какого сайта был переход (во всяком случае хром) короче если СЕО не важно этим можно пользоваться если важно то нельзя
7 - Цели ( элементы, к которым будет применено действие) - тут необходимо перечислить элементы, к которым будет применено действие выбранное в поле выше. Способ выбора целей аналогичен со способами выбора целей, которые запускают триггер.
Примечание –бывает, что цель запускающая триггер и цель, к которой, будет применено действие, может быть одной и той же.
После выбора всех настроек обязательно требуется сохранить триггер (8), а не закрыть его крестиком.