Функция callback при клике

Библиотека Toastify позволяет создавать уведомления в браузере с высокой степенью настраиваемости. Одной из ключевых возможностей является использование функции callback, которая выполняется при взаимодействии пользователя с уведомлением, например при клике.

Подключение Toastify

Перед использованием функционала необходимо подключить библиотеку:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

После этого можно создавать уведомления с различными параметрами.

Базовая структура уведомления с callback

Уведомление создается через функцию Toastify({...}). Для обработки клика используется свойство onClick, которому передается функция:

Toastify({
    text: "Уведомление с callback",
    duration: 3000,
    close: true,
    gravity: "top",
    position: "right",
    backgroundColor: "#4CAF50",
    onClick: function() {
        console.log("Уведомление было кликнуто");
    }
}).showToast();
  • text — текст уведомления.
  • duration — время отображения в миллисекундах.
  • close — отображение кнопки закрытия.
  • gravity — положение по вертикали (top или bottom).
  • position — положение по горизонтали (left, center, right).
  • backgroundColor — цвет фона уведомления.
  • onClick — функция, вызываемая при клике на уведомление.

Передача параметров в callback

Функция callback может использовать внешние данные, передаваемые через замыкания:

let userName = "Алексей";

Toastify({
    text: "Приветствие",
    duration: 5000,
    onClick: function() {
        alert(`Привет, ${userName}!`);
    }
}).showToast();

В данном примере при клике на уведомление будет выведено приветствие с именем пользователя.

Уведомления с перенаправлением

Функцию callback можно использовать для выполнения действий, таких как переход на другую страницу:

Toastify({
    text: "Перейти на страницу документации",
    duration: 4000,
    onClick: function() {
        window.location.href = "https://github.com/apvarun/toastify-js";
    }
}).showToast();

Таким образом, уведомление превращается в интерактивный элемент интерфейса.

Комбинирование с закрытием уведомления

Иногда необходимо закрывать уведомление вручную при клике. В этом случае в callback можно использовать метод hideToast():

let toast = Toastify({
    text: "Нажмите, чтобы закрыть",
    duration: -1, // уведомление будет висеть до закрытия
    close: false,
    onClick: function() {
        toast.hideToast();
        console.log("Уведомление закрыто вручную");
    }
});

toast.showToast();

Использование duration: -1 делает уведомление постоянным до действия пользователя, а вызов hideToast() закрывает его программно.

Динамическое изменение содержимого при клике

Callback позволяет менять текст или стиль уведомления без его повторного создания:

let toast = Toastify({
    text: "Нажмите для изменения текста",
    duration: 5000,
    onClick: function() {
        toast.setText("Текст изменен!");
        toast.setStyle({ background: "#FF5722" });
    }
});

toast.showToast();

Методы setText() и setStyle() дают возможность управлять визуальным представлением уведомления в реальном времени.

Использование с асинхронными операциями

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

Toastify({
    text: "Получение данных...",
    duration: 5000,
    onClick: async function() {
        let response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
        let data = await response.json();
        console.log("Полученные данные:", data);
    }
}).showToast();

Асинхронный callback позволяет интегрировать уведомления с API и другими системами без блокировки интерфейса.

Резюме по onClick

  • Свойство onClick — это основной механизм обработки клика по уведомлению.
  • Callback может использовать замыкания для доступа к внешним переменным.
  • Callback может быть синхронным или асинхронным.
  • Методы hideToast(), setText() и setStyle() позволяют управлять уведомлением динамически.
  • Используется для интерактивных действий: переход по ссылке, отображение данных, закрытие уведомления.

Функция callback делает Toastify мощным инструментом для создания интерактивных уведомлений с гибкой логикой поведения.

Оглавление