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 // время отображения сообщения
});
Следующая запись
jQuery - Кнопка наверх для сайта (4 примера реализации)