Тема bootstrap-v3

Для использования библиотеки Noty в проектах с Bootstrap 3 необходимо убедиться, что подключены следующие ресурсы:

  1. CSS Bootstrap 3 – для корректного отображения кнопок, модальных окон и элементов интерфейса.
  2. Noty CSS и JS – для стилизации уведомлений и работы скриптов.
  3. jQuery – Noty зависит от jQuery, поэтому его подключение обязательно.

Пример подключения:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noty/3.2.0-beta/noty.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noty/3.2.0-beta/noty.min.js"></script>

После подключения библиотек создается экземпляр уведомления с помощью конструктора new Noty({...}).

new Noty({
    text: 'Пример уведомления',
    type: 'success',  // success, error, warning, info, alert
    layout: 'topRight',
    theme: 'bootstrap-v3',
    timeout: 3000
}).show();

Ключевой момент – использование темы bootstrap-v3, которая адаптирует визуальное оформление уведомлений под стиль Bootstrap 3.

Основные параметры конструктора Noty

  • text – текст уведомления. Может содержать HTML.

  • type – тип уведомления (alert, success, error, warning, info). Влияет на цвет и иконку.

  • layout – расположение уведомления на странице (topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter, center).

  • theme – визуальная тема, например bootstrap-v3.

  • timeout – время автоматического скрытия в миллисекундах. 0 отключает автоудаление.

  • progressBar – отображение полосы прогресса таймера уведомления (true или false).

  • closeWith – способы закрытия (['click', 'button']).

  • animation – объект с настройками анимации:

    animation: {
    open: 'animated fadeInDown',
    close: 'animated fadeOutUp',
    easing: 'swing',
    speed: 500
}

Методы управления уведомлениями

show() – отображает уведомление. close() – закрывает уведомление. setText(newText) – обновляет текст уведомления на лету. setType(newType) – изменяет тип уведомления динамически.

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

let n = new Noty({
    text: 'Загрузка данных...',
    type: 'info',
    theme: 'bootstrap-v3',
    timeout: false
}).show();

setTimeout(() => {
    n.setText('Данные успешно загружены!');
    n.setType('success');
    n.close();
}, 3000);

Обработка событий

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

  • onShow – уведомление только что показано.
  • onClose – уведомление закрывается.
  • onClick – клик по уведомлению.
  • onHover – наведение курсора на уведомление.

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

new Noty({
    text: 'Нажмите для действия',
    type: 'alert',
    theme: 'bootstrap-v3',
    layout: 'topCenter',
    timeout: 0,
    callbacks: {
        onClick: function() {
            alert('Уведомление было нажато!');
        },
        onClose: function() {
            console.log('Уведомление закрыто');
        }
    }
}).show();

Группировка уведомлений и управление очередью

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

Noty.overrideDefaults({
    theme: 'bootstrap-v3',
    layout: 'topRight',
    timeout: 4000
});

let queue = [];
queue.push(new Noty({ text: 'Первое уведомление' }));
queue.push(new Noty({ text: 'Второе уведомление' }));

queue.forEach(n => n.show());

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

Интеграция с формами и кнопками Bootstrap

Часто уведомления вызываются после действий пользователя:

<button id="saveBtn" class="btn btn-primary">Сохранить</button>
$('#saveBtn').on('click', function() {
    new Noty({
        text: 'Данные успешно сохранены',
        type: 'success',
        theme: 'bootstrap-v3',
        layout: 'topRight',
        timeout: 2500
    }).show();
});

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

Кастомизация внешнего вида

Тема bootstrap-v3 наследует базовую стилизацию кнопок и панелей Bootstrap. Дополнительно можно:

  • Изменять цвет фона и текста через CSS:

    .noty_type_success {
    background-color: #5cb85c;
    color: #fff;
}

  • Добавлять иконки через Bootstrap Glyphicon:

    new Noty({
    text: '<span class="glyphicon glyphicon-ok"></span> Успех!',
    type: 'success',
    theme: 'bootstrap-v3'
}).show();

  • Использовать анимации Animate.css вместе с параметром animation для плавного появления и скрытия.

Советы по производительности

  1. Не создавайте большое количество уведомлений одновременно — используйте очередь.
  2. Для уведомлений с динамическим содержимым можно использовать один экземпляр Noty и обновлять его текст методом setText.
  3. Всегда указывайте timeout, чтобы избежать “залипания” уведомлений на странице.

Хотите, я могу добавить отдельный раздел с подробными примерами сложных сценариев, где Noty интегрирован с формами, AJAX-запросами и динамическими таблицами Bootstrap 3? Это будет полезно для учебника.

Оглавление