Возможно вас это заинтересует

noty это jQuery плагин, с помощью которого можно легко создать различные оповещения типа: alert, success, error, warning, information, confirmation(сообщение с подтверждением), в место стандартного диалогового окна браузера. Количество отображаемых сообщение на странице можно регулировать, например не больше 5 сообщений, и тогда не отобразившиеся сообщения будут добавлены в очередь.

Для уведомлений предусмотрены следующие позиции:

  • top
  • topLeft
  • topCenter
  • topRight
  • center
  • centerLeft
  • centerRight
  • bottom
  • bottomLeft
  • bottomCenter
  • bottomRight

API плагина предоставляет множество других параметров, таких как настройки текста, анимации, скорости, кнопок и многое другое.

Установка

Для работы плагина нужно его подключить, думаю если вы на этом сайте то уже знаете как подключать скрипты =). Для сведения, плагин работает с версией jQuery от 1.6+.

Создание объекта

В плагине реализовано простое создание уведомлений. Достаточно просто использовать следующий код:

1
var n = noty({text: 'noty - a jquery notification library!'});

и вызывать возвращенный javascript объект(не jQuery). Кстати в параметре text можно указать любой ваш текст или html код.

Пример вызова

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function generate(layout) {
     var n = noty({
          text        : layout,
          type        : 'alert',
          dismissQueue: true,
          layout      : layout,
          theme       : 'defaultTheme'
      });
}

function generateAll() {
      generate('top');
      generate('topCenter');
      generate('topLeft');
      generate('topRight');
      generate('center');
      generate('centerLeft');
      generate('centerRight');
      generate('bottom');
      generate('bottomCenter');
      generate('bottomLeft');
      generate('bottomRight');
}

$(document).ready(function () {
      generateAll();
});

Думаю тут понятно как все работает, но на всякий случай кратко опишу.
Сначала создает функцию с объектом плагина и кучей свойств, значение text будет равно названию выводимой позиции, т.е. значению полученной из функции generateAll(), тип сообщения будет alert, остальные опции рассмотрим позже. В конце вызываем функцию generateAll() которая вызывает по очереди функцию с плагином.

Не обязательно использовать именно такой вызов плагина, это только пример.

Настройки

Ниже представлен полный список настроек используемых по умолчанию:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$.noty.defaults = {
    layout: 'top', //позиция сообщения
    theme: 'defaultTheme', // стиль сообщения
    type: 'alert', //тип сообщения     ....  позиции и типы сообщений перечислены в начале поста
    text: '', // текст сообщения
    dismissQueue: true, // если включено то сообщения будут появляться в порядке вызова, т.е. выстраиваться в очередь
    template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>', // шаблон сообщения
    animation: { // анимация
        open: {height: 'toggle'},
        close: {height: 'toggle'},
        easing: 'swing',
        speed: 500 // скорость открытия и закрытия сообщения
    },
    timeout: false, // задержка перед закрытием сообщения
    force: false, // добавляет уведомление о добавлении в очередь
    modal: false, // создает эффект модального окна, затемняет фон страницы
    maxVisible: 5, // максимальное кол-во отображаемых сообщений на экране, если вызвано больше то они будут добавлены в очередь
    killer: false, // если включено то закрывает все открытые сообщения кроме себя
    closeWith: ['click'], // ['click', 'button', 'hover'] способ закрытия сообщения
    callback: { // обратные функции
        onShow: function() {}, // срабатывает перед показом сообщения
        afterShow: function() {}, // после показа
        onClose: function() {}, // перед закрытием
        afterClose: function() {} // после закрытия
    },
    buttons: false // добавляет кнопки в сообщение и к каждой кнопке можно добавить свою функцию!
};

Пользовательский контейнер

С помощью этого кода можно выводить сообщения в любом контейнере на странице.

1
var n = $('.custom_container').noty({text: 'noty - a jquery notification library!'});

Кнопки

Еще одна мощная функция о которой говорилось выше, в любое сообщение можно добавить любой массив кнопок и к каждой присвоить любое событие!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
noty({
  text: 'Вы хотите продолжить?',
  buttons: [
    {addClass: 'btn btn-primary', text: 'Да', onClick: function($noty) {

        // this = элемент кнопки
        // $noty = $noty элемент

        $noty.close();
        noty({text: 'Вы нажали кнопку "Да"', type: 'success'});
      }
    },
    {addClass: 'btn btn-danger', text: 'Отмена', onClick: function($noty) {
        $noty.close();
        noty({text: 'Вы нажали кнопку "Отмена"', type: 'error'});
      }
    }
  ]
});

Callback функции

У плагина есть 4 полезных Callback функции о которых мы упоминали выше.
onShow , afterShow , onClose , afterClose

API функции

$.noty.get(id) – Возвращает javascript объект;
$.noty.close(id) – Закрывает сообщение;
$.noty.clearQueue() – Очищает очередь сообщений;
$.noty.closeAll() – Закрывает все сообщения;
$.noty.setText(id, text) – Обновляет текст сообщения;
$.noty.setType(id, type) – Изменяет тип сообщения;

Возможно вас это заинтересует
comments powered by HyperComments