Базовый синтаксис навешивания обработчиков

Библиотека Vex предназначена для упрощения работы с пользовательскими уведомлениями, предоставляя гибкие средства для создания и управления всплывающими сообщениями на веб-странице. Важной частью работы с уведомлениями является привязка обработчиков событий, таких как клики, наведение и закрытие уведомлений. Базовый синтаксис навешивания обработчиков событий в Vex является важным элементом для создания интерактивных и удобных интерфейсов.

Навешивание обработчиков на элементы уведомлений

Vex предоставляет несколько способов привязать обработчики событий к всплывающим сообщениям, созданным с использованием библиотеки. Все обработчики событий могут быть назначены через объект настроек, передаваемый при создании уведомления.

vex.dialog.open({
  message: 'Сообщение с кнопками',
  buttons: [
    $.extend({}, vex.dialog.buttons.YES, {
      text: 'Принять'
    }),
    $.extend({}, vex.dialog.buttons.NO, {
      text: 'Отклонить'
    })
  ],
  afterClose: function() {
    console.log('Уведомление было закрыто');
  }
});

В этом примере, при закрытии уведомления, будет вызвана функция, которая выведет сообщение в консоль. Параметр afterClose используется для привязки обработчика события закрытия уведомления.

Основные типы событий

  1. afterClose — вызывается после закрытия окна уведомления.
  2. beforeClose — активируется перед тем, как уведомление будет закрыто. Это событие полезно, если требуется выполнить какие-либо действия перед удалением уведомления из DOM.
  3. onSubmit — этот обработчик вызывается при нажатии на кнопку подтверждения или отправки формы внутри уведомления.

Пример использования beforeClose:

vex.dialog.open({
  message: 'Вы уверены, что хотите закрыть?',
  buttons: [
    $.extend({}, vex.dialog.buttons.YES, {
      text: 'Да'
    }),
    $.extend({}, vex.dialog.buttons.NO, {
      text: 'Нет'
    })
  ],
  beforeClose: function(vexInstance, event) {
    if (!confirm('Вы уверены?')) {
      event.preventDefault();
    }
  }
});

В данном примере событие beforeClose предотвращает закрытие окна, если пользователь не подтверждает свой выбор.

Работа с кнопками внутри уведомлений

Одной из ключевых особенностей библиотеки Vex является возможность кастомизации кнопок, размещённых в уведомлениях. Для привязки обработчиков событий на кнопки необходимо использовать параметры buttons и передавать обработчики в момент их создания.

Пример с привязкой обработчика на кнопку «Да»:

vex.dialog.open({
  message: 'Вы хотите продолжить?',
  buttons: [
    $.extend({}, vex.dialog.buttons.YES, {
      text: 'Да',
      click: function() {
        alert('Вы выбрали «Да»');
      }
    }),
    $.extend({}, vex.dialog.buttons.NO, {
      text: 'Нет',
      click: function() {
        alert('Вы выбрали «Нет»');
      }
    })
  ]
});

В данном примере каждой кнопке назначен свой обработчик события click, который срабатывает при её нажатии.

Обработчики для пользовательских элементов

Можно также привязывать обработчики к пользовательским элементам внутри уведомлений. Например, если необходимо привязать обработчик к произвольному элементу DOM, который находится внутри всплывающего окна, это можно сделать с помощью стандартных методов JavaScript.

Пример привязки обработчика на произвольный элемент:

vex.dialog.open({
  message: 'Нажмите на элемент для действия',
  buttons: [
    $.extend({}, vex.dialog.buttons.YES, {
      text: 'Закрыть'
    })
  ],
  afterOpen: function() {
    var customElement = document.getElementById('custom-element');
    customElement.addEventListener('click', function() {
      alert('Вы кликнули по пользовательскому элементу');
    });
  }
});

Этот код выполняет привязку обработчика клика на элемент с ID custom-element, который может быть добавлен внутри уведомления.

Обработчики событий для модальных окон

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

var vexInstance = vex.dialog.open({
  message: 'Модальное окно с дополнительным функционалом',
  buttons: [
    $.extend({}, vex.dialog.buttons.YES, {
      text: 'Подтвердить',
      click: function() {
        alert('Подтверждено');
      }
    }),
    $.extend({}, vex.dialog.buttons.NO, {
      text: 'Отменить',
      click: function() {
        alert('Отменено');
      }
    })
  ]
});

vexInstance.on('close', function() {
  console.log('Модальное окно было закрыто');
});

В данном примере добавляется обработчик события close, который срабатывает при закрытии модального окна.

Пример комплексной конфигурации

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

vex.dialog.open({
  message: 'Пожалуйста, выберите действие',
  buttons: [
    $.extend({}, vex.dialog.buttons.YES, {
      text: 'Ок',
      click: function() {
        console.log('Кнопка Ок была нажата');
      }
    }),
    $.extend({}, vex.dialog.buttons.NO, {
      text: 'Отмена',
      click: function() {
        console.log('Кнопка Отмена была нажата');
      }
    })
  ],
  afterClose: function() {
    alert('Окно было закрыто');
  },
  beforeClose: function() {
    return confirm('Вы уверены, что хотите закрыть окно?');
  }
});

Здесь комбинируются обработчики для кнопок с событиями закрытия окна. При нажатии на одну из кнопок выводится сообщение в консоль, а при попытке закрыть окно появляется подтверждение.

Заключение

Правильное использование событий в библиотеке Vex позволяет гибко управлять поведением всплывающих уведомлений, делая интерфейс более интерактивным и адаптированным к потребностям пользователя. Важно помнить, что каждый обработчик событий имеет своё место и время выполнения, что даёт возможность настроить динамическое поведение уведомлений с учётом различных действий и взаимодействий.

Оглавление