Реакция на клик

download Скачать trigger_ML_v2.js

Версия скрипта 2.0, последнее обновление: 11.05.2021

Одиночный триггер управление классом

Объект управления
  • data-trigger-toggle='#id' - риверсия класса-идентификатора у объектов с #id;

  • data-trigger-remove='#id' - удаление класса;

  • data-trigger-add='#id' - добавление класса;

Управляемый объект
  • data-trigger-id='#id' - помечаем объект #id;

Примечание
  1. Класс управления active;

  2. Идентификаторы могут повторятся;

  3. Идентификаторы могут идти через запятую или через запятую + пробел;

  4. Поведение как объекта приоритетней поведения как группы объектов;

Пример

Необходимо отобразить скрытый блок при нажатии на некоторый триггер:

<div data-trigger-toggle='test_1'>Сделаю блок или активным или неактивным</div> <div data-trigger-remove='test_1'>Сделаю блок только неактивным</div> <div data-trigger-add='test_1'>Сделаю блок только активным</div> <div data-trigger-id='test_1'>Скрытый контент</div>
Сделаю блок или активным или неактивным
Сделаю блок только неактивным
Сделаю блок только активным

Показать CSS

.section_2 .wrapper .content .example .example_test { background: #eee; padding: 20px; margin-bottom: 15px !important; } .example_test_3_1 .slider_3_1 { position: relative; width: 100%; height: 100px; overflow: hidden; cursor: grab; } .example_test_3_1 .slider_3_1 .item { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: skyblue; font-size: 40px; user-select: none; transition: all 0.8s; } .description p, .example ul, .content .example p { margin-bottom: 15px; line-height: 1.2; } .example_test_3_1 .slider_3_1 .item p, .example_test_3_1 .control > div p{ margin: 0 !important; } .example_test_3_1 .info { margin-top: 15px; font-weight: bold; } .example_test_3_1 .control { position: relative; margin-top: 20px; height: 25px; } .example_test_3_1 .control > div.prev { left: 0; } .example_test_3_1 .control > div { cursor: pointer; padding: 5px; background: #ccc; width: max-content; border-radius: 5px; transition: all 0.3s; user-select: none; position: absolute; display: flex; justify-content: center; align-items: center; height: 25px; width: 80px; } .example_test_3_1 .control > div.next { left: 95px; }
Примечание:

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

Группа триггеров управление классом

Управляемый объект и объект объект управления в одном
  • data-trigger-group='#id' - объединяет объекты с #id в группу, в которой может быть активен только один эллемент

Управляемый объект
  • data-trigger-group-id='#id' - объединяет объекты в группу без активации по нажатию

Примечание
  1. Класс управления active;

  2. Группа может быть только одна;

  3. Поведение как объекта приоритетней поведения как группы объектов;

Пример

Представим, что у нас есть аккордион, в котором может быть активно только одно поле, а остальные должны скрываться:

<div> <div data-trigger-group='test_2' data-trigger-add='test_2_1'>Кнопка 1</div> <div data-trigger-group-id='test_2' data-trigger-id='test_2_1'>Контент 1</div> </div> <div> <div data-trigger-group='test_2' data-trigger-add='test_2_2'>Кнопка 2</div> <div data-trigger-group-id='test_2' data-trigger-id='test_2_2'>Контент 2</div> </div> <div> <div data-trigger-group='test_2' data-trigger-add='test_2_3'>Кнопка 3</div> <div data-trigger-group-id='test_2' data-trigger-id='test_2_3'>Контент 3</div> </div>
Кнопка 1
Кнопка 2
Кнопка 3

Показать CSS

.section_2 .wrapper .content .example .example_test { background: #eee; padding: 20px; margin-bottom: 15px !important; } .example_test_3_1 .slider_3_1 { position: relative; width: 100%; height: 100px; overflow: hidden; cursor: grab; } .example_test_3_1 .slider_3_1 .item { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: skyblue; font-size: 40px; user-select: none; transition: all 0.8s; } .description p, .example ul, .content .example p { margin-bottom: 15px; line-height: 1.2; } .example_test_3_1 .slider_3_1 .item p, .example_test_3_1 .control > div p{ margin: 0 !important; } .example_test_3_1 .info { margin-top: 15px; font-weight: bold; } .example_test_3_1 .control { position: relative; margin-top: 20px; height: 25px; } .example_test_3_1 .control > div.prev { left: 0; } .example_test_3_1 .control > div { cursor: pointer; padding: 5px; background: #ccc; width: max-content; border-radius: 5px; transition: all 0.3s; user-select: none; position: absolute; display: flex; justify-content: center; align-items: center; height: 25px; width: 80px; } .example_test_3_1 .control > div.next { left: 95px; }
Примечание:

Если реализовывать такой аккордион посредством одиночных триггеров, придется писать длинные data-атрибуты. А если у нас сотня элементов в аккордионе? Именно для минимизации кода добавлена возможность объединять элементы в группу.

Сама механика строится на следующих процессах: все кнопки и скрытые блоки объединены в одну группу - в группе может быть один активный элемент, тот, на который был осуществлен клик. data-trigger-group-id не реагирует на клик, следовательно, с них класс-идентификатор может только удаляться. С помощью одиночных триггеров мы добавляем класс-идентификатор соответствующему скрытому блоку в группе. Порядок действий: удалить все классы-идентификаторы с группы, добавить класс-идентификатор к объекту клика, после добавить класс-идентификатор одиночного триггера.

Особое поведение управляемого объекта

Управляемый объект
  • data-trigger-mod='#mod1,#mod2..'

Модификаторы
  • saveWidth - сохранить ширину

  • saveHeight - сохранить высоту

Пример

При добавлении класса-идентификатора к элементу меню, текст становиться жирным - необходимо избежать смещения шаблона:

<div data-trigger-toggle='test_3'>Сделаю блок или активным или неактивным</div> <div data-trigger-id='test_3' data-trigger-mod='saveWidth'>Пункт меню</div>
Сделаю блок или активным или неактивным
Пункт меню - сохраню ширину
Пункт меню - сохраню и ширину и высоту
Примечание:

Проблематика: Получаемые значения обрезаются до целых чисел - что приводит к багу, который вы можете наблюдать на этом примере.

Скорее всего вы не найдете применения данным модификаторам поведения, но они есть и их список может быть расширен.

Дополнительные действия к триггеру управления

Объект управления
  • data-trigger-set-value='#idset1, #idset2, ...; #value1, #value2, ...' - добавление #value1 в объект с #idset1 и т.д. (автоопределения input или нет)

Управляемый объект
  • data-trigger-id-set='#idset' - помечает объект #idset

Пример

У нас есть форма, где мы можем выбирать некоторые поля, к тому же, мы хотим отображать наш выбор:

<ul> <li data-trigger-set-value='test_4_1;Особая упаковка'>Особая упаковка</li> <li data-trigger-set-value='test_4_2;Обернуть подарочной лентой'>Обернуть подарочной лентой</li> <li data-trigger-set-value='test_4_3;Срочная доставка'>Срочная доставка</li> <li class="clear" data-trigger-set-value='test_4_1,test_4_2,test_4_3;,,'>Очистить выбор</li> </ul> <strong>Ваш выбор:</strong> <p><span data-trigger-id-set='test_4_1'></span><span data-trigger-id-set='test_4_2'></span><span data-trigger-id-set='test_4_3'></span></p>

Выберите нужные опции:

  • Особая упаковка
  • Обернуть подарочной лентой
  • Срочная доставка
  • Очистить выбор
Ваш выбор:

Примечание:

Предполагается, что это решение будет использоваться в формах и калькуляторах.

Карусель содержимого триггера

Управляемый объект и объект объект управления в одном
  • data-trigger-text-carusel='#v1;#v2...' - меняет содержимое объекта по очереди на следующий в списке, начиная с первого

Пример

У нас есть кнопка "Свернуть", мы хотим, что бы она не только сворачивала, но и разворачивала некоторый контент, к тому же, меняя собственный контент:

<div data-trigger-toggle='test_5' data-trigger-text-carusel='Развернуть;Свернуть'>Свернуть</div> <div class="active" data-trigger-id='test_5'>Скрытый контент</div>
Свернуть
Примечание:

Изначально, именно для этого случая был добавлен такой функционал.