Библиотека jGrowl или делаем уведомления как на хабре
Я являюсь поклоником Ajax и вообще люблю динамически изменяющиеся контенты, всякие динамические меню, голосования, модальные окна и д.р. Но больше всего не люблю когда страница перегружена ими. Т.е. невозможно выполнить какое-то действие или перейти на желаемую страницу. Как правило пользователь покидает такой ресурс или в крайнем случае пытается зайти на него снова. В этой заметке мы попробуем сделать небольшое окошко-уведомление, которое уведомит пользователя о том или ином ответе от сервера.
Делая для своего сайта личный кабинет, я столкнулся с проблемой ведомления пользователя о сохранении информации о нем. Банальный вывод строки типо «Ваша информация сохранена» мне не хотелось. Перегружать страницу модальным окном или использовать Lightbox тоже нехотелось. На помощь пришла простая библиотека jGrowl, с помощью которой можно сделать такое уведомление.
Для создания такого красивого уведомления нам потребуется библиотека JQuery, ее можно взять с сайт jquery.com
http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js размер 55.9 Kб =)
И нам потребуется сама библиотека jGrowl, ее можно взять с сайта разработчика
http://www.stanlemon.net/projects/jgrowl.html размер ~5-7 Кб
Пример использования:
Для начала нам нужно подключить стили:
В стилях прописано оформление блока. Оформление выводимого текста можно ключить непосредсвенно в текст сообщения.
Подключаем библиотеки JQuery и jGrowl:
<script src="/jquery.js" type="text/javascript">
<script type="text/javascript" src="../jquery.jgrowl.js"> Сам код блока выглядит следующим образом:
$.jGrowl("Hello world!");
$.jGrowl("Это сообщение исчезнет через 1сек.", { life: 1000 });
$.jGrowl("Уведомление с хидером, не исчезает.", { header: 'A Header', sticky: true }); Можно использовать вместо $.jGrowl jQuery.jGrowl если используются совместно разные библиотеки, тут уже дело вкуса и отдельная тема для обсуждения =)
jGrowl Опции:
Спасибо,iliacmd, за составление описания, http://iliacmd.habrahabr.ru/blog/52271/
header [ Пустая строка ]
Эта опция задает заголовок сообщения. Пример:
$.jGrowl('Текст уведомления', {Header: 'Заголовок сообщения'} );
sticky [ false ]
Если установлено true, то уведомление будет jотображаться на экране пока не будет закрыто пользователем. Если установлено false то сообщение исчезнет сразу после истечения срока жизни, который устанавливается с помощью параметра life.
glue [ after ]
Эта опция определяет, как будет вставляться уведомление в jGrowl контейнер. Если указано after, то уведомление вставляется после уведомлений в контейнере. Если before, то перед уведомлениями в контенере.
position [ top-right ]
Определяет класс применяемый к jGrowl конейнеру и управляющий его положением на экране. По умолчанию доступно несколько опций — это top-left, top-right, bottom-left, bottom-right, center. Эта опция должна быть установлена до запуска метода вызывающего уведомление.
Пример:
Для того чтобы, уведомления выводились в центре экрана надо написать так:
$.jGrowl.defaults.position = 'center';
theme [ default ]
Определяет CSS класс определяющий внешний вид выводимого уведомления.
div.jGrowl div.red_theme {
background-color: #F00;
color: #FFF;
}
Назначаем тему уведомлению
$.jGrowl('Уведомление', { theme: 'red_theme'});corners [10px]
Eсли подключен плагин jQuery скривляющий углы, то спомощью данной опции можно регулировать радиус скругления углов для уведомления.
Плагин брать здесь: CORNERS
check [1000]
Определяет частоту с которой jGrowl будет проверять сообщения, которые подлежат удалению c экрана. Оптимальным вариантом для этого параметра будет, минимальное время жизни уведомления. В данном примере это 3 секунды.
$.jGrowl.defaults.check = 3000;
life [3000]
Определяет время жизни уведомления на экране. Т.е время по прошествии которого jGrowl будет считать его подлежащим к очистке и после которго оно будет удалено в ходе очередной проверки.
speed [ normal ]
Определяет скорость анимации при открытии и закрытии уведомления
easing [ swing ]
Определяет способ анимации при открытии и закрытии уведомления. По умолчанию доступны все способы анимации, что и для метода animate библиотеки jquery.
closer [ true ]
Определяет должна ли выводится кнопка close-all, когда на экране появляется более одного уведомления, true — выводится, false — не выводится. Так же может быть назанчена функция обратного вызова, которая будет срабатывать при нажатии на кнопку close-all.
$.jGrowl.defaults.closer=true;
closeTemplate [amp;times;]
Опция содержит спец символ, который используется для кнопки закрыть для уведомления. Поумолчанию используется спец символ amp;times; который соответствует знаку умножения.
$.jGrowl("Hello world!", {closeTemplate: 'A'});
closerTemplate [[ close all ]]
Это содержимое используется для создания ссылки close-all которая по умолчанию добавляется с низу jGrowl контейнера, и испоьзуется для закрытия всех уведомлений вконтейнере.
$.jGrowl.closerTemplate = "Закрыть все уведомления";
log [ function(e,m,o) {} ]
Определяет функцию обратного вызова которая срабатывает прежде других при появлении уведомления. Это предоставляет пользователю удобный механиз ведения лога всех уведомлений jGrowl. Функция принимает три параметра: уведомление как DOM элемент, сообщение уведомления и опции.
$(e).attr('id') — идентификатор id уведомления
(new Date()).getTime() — дата создания уведомления
m — сообщение уведомления
o.theme — тема уведомления $.jGrowl.defaults.log = function(e,m,o) {
$('#logs').append("" + $(e).attr('id') + " " + (new Date()).getTime() + ": " + m + " (" + o.theme + ")")
} beforeOpen [ function(e,m,o) {} ]
Определяет функцию обратного вызова, которая будет срабатывать перед тем, как откроется новое уведомление. Функция принимает три параметра: уведомление как DOM элемент, сообщение уведомления и опции.
open [ function(e,m,o) {} ]
Определяет функцию обратного вызова, которая будет срабатывать при открытии нового уведомления. Функция принимает три параметра: уведомление как DOM элемент, сообщение уведомления и опции.
beforeClose [ function(e,m,o) {} ]
Определяет функцию обратного вызова, которая будет срабатывать перед закрытием уведомления. Функция принимает три параметра: уведомление как DOM элемент, сообщение уведомления и опции.
close [ function(e,m,o) {} ]
Определяет функцию обратного вызова, которая будет срабатывать при открытии нового уведомления. Функция принимает три параметра: уведомление как DOM элемент, сообщение уведомления и опции.
При закрытии уведомления, высветит alert с тем-же сообщением
$.jGrowl.('Hellow World', close: function(e,m,o){
alert(m);
} animateOpen [{ opacity: 'show' }]
Анимационное свойство используемое при открытии уведомления (по умолчанию «проявление»).
animateClose [ { opacity: 'hide' } ]
Анимационное свойство используемое при закрытии уведомления (по умолчанию «затухание»).
Ссылки
Примеры доступны на сайте разработчика http://stanlemon.net/projects/jgrowl.html
Аналог jGrowl — FaceBox http://famspam.com/facebox