Библиотека jGrowl или делаем уведомления как на хабре

Web-разработка

Автор: Александр Степанов

1 нояб. 2011 г., 08:56:50  1232


jgrowlЯ являюсь поклоником Ajax и вообще люблю динамически изменяющиеся контенты, всякие динамические меню, голосования, модальные окна и д.р. Но больше всего не люблю когда страница перегружена ими. Т.е. невозможно выполнить какое-то действие или перейти на желаемую страницу. Как правило пользователь покидает такой ресурс или в крайнем случае пытается зайти на него снова. В этой заметке мы попробуем сделать небольшое окошко-уведомление, которое уведомит пользователя о том или ином ответе от сервера.

Делая для своего сайта личный кабинет, я столкнулся с проблемой ведомления пользователя о сохранении информации о нем. Банальный вывод строки типо «Ваша информация сохранена» мне не хотелось. Перегружать страницу модальным окном или использовать Lightbox тоже нехотелось. На помощь пришла простая библиотека jGrowl, с помощью которой можно сделать такое уведомление.

  

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: