Плагин jQuery - Gritter

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

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

 

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

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

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

<link rel="stylesheet" type="text/css" href="css/gritter.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.5');</script>
<script type="text/javascript" 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 // время отображения сообщения
});

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 14 Мая 2011 20:08
    Serpanok
    Хороший плагин, пригодиться. В закладки...
  • 15 Мая 2011 02:08
    djuice7
    Хороший плагин буду делать его как сообщения
  • 15 Мая 2011 10:30
    NeonDT
    Отличный плагин и пример хороший!У этого плагина есть будущее.
  • 15 Мая 2011 12:11
    notbot
    Прикольно, это походу тот, что используется ВКонтакте
    • 18 Мая 2011 18:28
      Никита Кратинов
      да, именно он и используется там
  • 21 Июня 2011 18:04
    Сергей Кшенский
    Как можно привязать его к БД? С целью сделать чат наподобие "контакта"??
  • 31 Августа 2011 14:23
    Николай Семенцов
    Я думаю для связи с БД надо юзать ajax
  • 19 Сентября 2011 19:13
    egostile
    если вдруг появится урок, как сделать обмен сообщениями между пользователями, с этим плагином, будет здорово.
    • 23 Сентября 2011 11:58
      panshev
      Кто-нибудь сможет помочь изменить css для всплывающего окна по заданной картинке за вознаграждение - пишите medicam@yandex.ru
  • 26 Мая 2013 15:14
    raparti
    Спасибо большое за плагин, очень как раз нужен:)
  • 3 Сентября 2015 09:33
    kiryu
    Прикрепил на сайт что бы глянуть, норм, а как сделать что бы при обновлении страницы сообщение было одно, но каждый раз высвечивалось рандомно? в смысле разные сообщения
^ Наверх ^