Обработчики событий кнопок

Для работы с iziToast необходимо подключить библиотеку в проект. Это делается через

После подключения можно вызывать функции iziToast.show(), iziToast.success(), iziToast.error(), iziToast.warning() и iziToast.info() для отображения уведомлений с различными стилями.

iziToast.success({
    title: 'Успех',
    message: 'Данные успешно сохранены',
    position: 'topRight'
});

Параметр position определяет расположение уведомления: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter.

Основные обработчики событий

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

  • onOpening – вызывается перед анимацией появления уведомления.
  • onOpened – вызывается после полной анимации появления.
  • onClosing – вызывается перед анимацией закрытия.
  • onClosed – вызывается после полного закрытия уведомления.
  • onClick – срабатывает при клике на уведомление.
  • onClosingClick – срабатывает, если закрытие уведомления инициировано кликом на крестик.

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

iziToast.show({
    title: 'Информация',
    message: 'Это уведомление с обработчиками событий',
    onOpening: function(instance, toast){
        console.log('Начало открытия уведомления', toast);
    },
    onOpened: function(instance, toast){
        console.log('Уведомление открыто', toast);
    },
    onClosing: function(instance, toast, closedBy){
        console.log('Закрытие уведомления', closedBy);
    },
    onClosed: function(instance, toast, closedBy){
        console.log('Уведомление закрыто', closedBy);
    },
    onClick: function(instance, toast, event){
        console.log('Клик на уведомление', event);
    }
});

Здесь instance — объект iziToast, toast — DOM-элемент уведомления, closedBy — строка, указывающая, что инициировало закрытие (timeout, button, click).

Использование кнопок с обработчиками

iziToast позволяет добавлять кастомные кнопки с собственными событиями. Кнопки задаются через массив buttons, где каждый элемент — функция, возвращающая HTML-кнопку и обработчик событий.

Пример уведомления с кнопками:

iziToast.show({
    title: 'Подтверждение',
    message: 'Вы хотите удалить запись?',
    buttons: [
        ['', function (instance, toast) {
            console.log('Нажата кнопка Да');
            instance.hide({transitionOut: 'fadeOut'}, toast, 'button');
        }],
        ['', function (instance, toast) {
            console.log('Нажата кнопка Нет');
            instance.hide({transitionOut: 'fadeOut'}, toast, 'button');
        }]
    ],
    position: 'topRight'
});

Особенности работы с кнопками:

  • Каждая кнопка передаёт объект instance и элемент toast.
  • Для закрытия уведомления через кнопку используется метод instance.hide().
  • transitionOut задаёт анимацию скрытия.

Динамическое управление событиями

Обработчики можно добавлять и изменять после создания уведомления через методы iziToast. Например, подписка на клик после инициализации:

const toastInstance = iziToast.show({
    title: 'Динамический клик',
    message: 'Кнопка добавлена позже',
    buttons: []
});

const btn = document.createElement('button');
btn.textContent = 'Нажми меня';
btn.addEventListener('click', function() {
    console.log('Кнопка сработала');
    toastInstance.hide({transitionOut: 'fadeOut'}, toastInstance, 'button');
});

toastInstance.querySelector('.iziToast-buttons').appendChild(btn);

Такой подход позволяет гибко управлять содержимым уведомления и подключать обработчики после его рендеринга.

Особенности событий закрытия

  • closedBy может принимать значения: 'timeout', 'button', 'click', 'overlay'.
  • Использование onClosing позволяет выполнить действия до исчезновения уведомления.
  • onClosed подходит для логирования или очистки ресурсов.

Пример с логированием причины закрытия:

iziToast.info({
    title: 'Внимание',
    message: 'Уведомление закроется',
    timeout: 5000,
    onClosed: function(instance, toast, closedBy){
        console.log('Уведомление закрыто по причине:', closedBy);
    }
});

Совмещение кнопок и событий уведомлений

Можно комбинировать обработчики уведомления и кнопок для сложной логики:

iziToast.show({
    title: 'Вопрос',
    message: 'Сохранить изменения?',
    onClick: function(instance, toast){
        console.log('Уведомление кликнуто');
    },
    buttons: [
        ['', function(instance, toast){
            console.log('Сохранение данных...');
            instance.hide({}, toast, 'button');
        }],
        ['', function(instance, toast){
            console.log('Отмена действия');
            instance.hide({}, toast, 'button');
        }]
    ]
});

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

Оглавление