Подключение через CDN

Для использования библиотеки Noty в проекте можно прибегнуть к подключению через CDN (Content Delivery Network), что позволяет быстро интегрировать функционал уведомлений без необходимости установки пакета через npm или локального хранения файлов.

Подключение CSS и JS

Noty требует подключения двух основных файлов: стилей и скрипта. Наиболее простой способ — подключение через официальные CDN-ссылки.

<!-- CSS для стилей уведомлений -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/noty.css">

<!-- Опциональные темы оформления -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/mint.css">

<!-- JS для функционала уведомлений -->
<script src="https://cdn.jsdelivr.net/npm/noty/lib/noty.min.js"></script>

Ключевые моменты:

  • Файл noty.css отвечает за базовую стилизацию уведомлений.
  • Тема (themes/mint.css) задаёт внешний вид уведомлений и может быть заменена на другие доступные темы: relax, sunset, metroui и др.
  • Скрипт noty.min.js обеспечивает функционал создания и управления уведомлениями.

Инициализация уведомления

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

new Noty({
    text: 'Привет! Это уведомление Noty',
    type: 'success', // Тип: success, error, warning, info, alert
    theme: 'mint',   // Тема уведомления
    timeout: 3000,   // Время автоматического закрытия (в мс)
    progressBar: true, // Отображение полосы прогресса
    layout: 'topRight' // Расположение уведомления
}).show();

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

  • type — определяет цвет и иконку уведомления.
  • theme — внешний вид, подключаемый через CSS.
  • timeout — если установлено в false, уведомление останется на экране до ручного закрытия.
  • progressBar — визуальный индикатор времени жизни уведомления.
  • layout — позиция на экране (topRight, topLeft, bottomRight, bottomLeft, center).

Асинхронное использование

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

fetch('/api/data')
    .then(response => response.json())
    .then(data => {
        new Noty({
            text: `Данные успешно загружены: ${data.length} элементов`,
            type: 'success',
            theme: 'mint',
            timeout: 4000
        }).show();
    })
    .catch(error => {
        new Noty({
            text: `Ошибка загрузки данных: ${error.message}`,
            type: 'error',
            theme: 'mint',
            timeout: 4000
        }).show();
    });

Это демонстрирует интеграцию Noty с асинхронными процессами без дополнительной настройки сборщика модулей.

Преимущества подключения через CDN

  • Мгновенная интеграция без установки пакетов.
  • Минимальные требования к проекту, достаточно вставки ссылок в HTML.
  • Поддержка последних версий библиотеки через обновляемые CDN.
  • Кэширование на стороне пользователя и серверов CDN, что ускоряет загрузку.

Управление темами

Noty поддерживает несколько предустановленных тем. Для изменения темы достаточно подключить соответствующий CSS-файл:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/noty/lib/themes/sunset.css">

И указать её в параметре theme при создании уведомления. При этом можно использовать разные темы для разных уведомлений на одной странице.

Особенности совместимости

  • Подключение через CDN гарантирует работу на всех современных браузерах.
  • Для корректного отображения уведомлений необходимо подключать CSS перед JS, иначе уведомления будут функциональны, но без стилей.
  • При использовании нескольких уведомлений одновременно можно управлять порядком и временем отображения через массивы и события onClose и onShow.

Использование событий

Noty предоставляет удобные события для кастомизации поведения:

let notification = new Noty({
    text: 'Уведомление с событиями',
    type: 'info',
    theme: 'mint',
    timeout: 5000,
    callbacks: {
        onShow: function() {
            console.log('Уведомление отображено');
        },
        onClose: function() {
            console.log('Уведомление закрыто');
        }
    }
}).show();

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

Хотите, я подготовлю следующий раздел про создание уведомлений с разными типами и анимациями, чтобы показать весь потенциал Noty в действии?

Оглавление