Плагин jQuery - Gritter (Всплывающее сообщение)

Плагин jQuery Gritter выводит на экран сообщения в правой верхней части. Они очень похожи на системные сообщения, однако не являются модальными, и их появление оформлено гораздо элегантнее.

Также имеется версия для Ruby on Rails.



Как использовать?

Для демонстрации использовалась структура каталогов три каталога images, css и js в одной папке проекта:

В раздел head документа добавляем загрузку скриптов и стилей:

<link rel="stylesheet" type="text/css" href="css/gritter.css" />
<script type="text/jаvascript" src="http://www.google.com/jsapi"></script>
<script type="text/jаvascript">google.load('jquery', '1.5');</script>
<script type="text/jаvascript" src="js/jquery.gritter.js"></script>


Выводим простое сообщение

$.gritter.add({
// (string | обязательно) заголовок сообщения
title: 'Это сообщение без изображения!',
// (string | обязательно) текст сообщения
text: 'Оно исчезнет через некоторое время. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.'
});



Выводим более сложное сообщение

$.gritter.add({
// (string | обязательно) заголовок сообщения
title: 'Это обычное сообщение!',
// (string | обязательно) текст сообщения
text: 'Оно исчезнет через некоторое время.',
// (string | опция) изображение, которое выводится слева
image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
// (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: 'Сообщение остается на экране, пока пользователь не нажмет кнопку (x).',
// (string | опция) изображение, выводимое в левой части сообщения
image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
// (bool | опция) Тип сообщения
sticky: true
});


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

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


Для удаления всех сообщений вызываем функцию:

$.gritter.removeAll();


Или можно использовать возвратные функции:

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



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

Установка глобальных значений удобна, если вы хотите установить опции для всех вызовов функции $.gritter.add

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


Демонстрация
скачать dle 11.3
Добавить комментарий

Оставить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив