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 // время отображения сообщения });