jQuery Gritter - плагин уведомлений на сайте

Используем классный jQuery плагин для уведомлений пользователя на сайте.

Плагин jQuery Gritter скачать

Кастомизация jQuery Gritter плагина

$.gritter.add({
  // (string | обязательно) заголовок сообщения
  title: 'Это обычное сообщение!',
  // (string | обязательно) текст сообщения 
  text: 'Оно исчезнет через некоторое время.',
  // (string | опция) изображение, которое выводится слева
  image: 'path to the picture,
  // (bool | опция) Тип сообщения, значение true соответствует липкому сообщению,
  //  которое удаляется с экрана только вручную.
  sticky: false, 
  // (int | опция) время показа сообщения (миллисекунд)
  time: 8000,
  // (string | опция) имя класса, который назначается для данного сообщения 
  class_name: 'my-class',
  // (function | опция) функция, которая вызывается перед открытием
  before_open: function(){
    alert('Данная функция вызвана перед открытием сообщения');
  },
  // (function | опция) функция, которая вызывается после открытия 
  after_open: function(e){
    alert("Данная функция вызвана после открытия сообщения.\nОна передает объект jQuery сообщения...\n" + e);
  },
  // (function | опция) функция, вызываемая перед закрытием
  before_close: function(e, manual_close){
  // Параметр manual_close определяется, если сообщение было закрыто с помощью кнопки "x"
    alert("Данная функция вызвана перед закрытием сообщения. Она предает объект jQuery сообщения... \n" + e);
  },
  // (function | опция) функция, вызываемая после закрытия сообщения
  after_close: function(){
    alert('Данная функция вызвана после закрытия сообщения');
  }
});

При использовании опции sticky: true, можно удалять сообщение тогда, когда это необходимо. Для этого нужно создать переменную, которая будет содержать уникальный идентификатор сообщения:

var unique_id = $.gritter.add({
  // (string | обязательно) заголовок сообщения 
  title: 'Липкое сообщение!',
  // (string | обязательно) текст сообщения
  text: 'Сообщение остается на экране, пока пользователь не нажмет кнопку "закрыть".',	
  // (bool | опция) Тип сообщения - липкое 
  sticky: true
});

Удалить сообщение можно с помощью функции:

$.gritter.remove(unique_id, { 
  fade: true,     // опция
  speed: 'fast' 	// опция
});

Удаление всех сообщений:

$.gritter.removeAll();

Использование callback функции:

$.gritter.removeAll({
  before_close: function(e){
    alert("Функция вызвана перед удаление всех сообщений. Она передает объект jQuery, который содержит все сообщения.\n" + e);
  },
  after_close: function(){
    alert('Функция вызвана послед удаления всех сообщений.');
  }
});

Установка глобальных значений

$.extend($.gritter.options, { 
  position: 'bottom-left', // вывод сообщения в заданной части экрана, по умолчанию'top-right', доступны: 'bottom-left', 'bottom-right', 'top-left', 'top-right'
  fade_in_speed: 'medium', // скорость вывода сообщения (string или int)
  fade_out_speed: 2000, // скорость исчезновения сообщения
  time: 6000 // время отображения сообщения
});