Уведомления jGrowl

Материал из JQuery

Перейти к: навигация, поиск

jGrowl


Описание
Свойства
Оформление

Плагин jGrowl позволяет выводить уведомления на странице. После подключения плагина это будет не сложнее чем вызвать alert (но в отличие от последнего, jGrowl не приостановит выполнения других скриптов на странице).

Плагин обладает настраиваемым оформлением (см. вкладку Оформление), полезными исчерпывающими настройками и позволяет обрабатывать основные события: открытие и закрытие уведомлений (причем обработчики разделены на момент перед открытием/закрытием и по их завершению. Подробности во вкладке Свойства).

Подключение

Чтобы плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а так же файлы js и css плагина: (их можно скачать на официальной странице):

Информация

Размер плагина ~11k (js+css)
Официальная страница
Кроссбраузерный (работает во всех современных браузерах)

↓  название :типы значений (значение по умолчанию)
header:string("")
В этом свойстве можно задать заголовок уведомления.
sticky:boolean(false)
Если установить этому свойству значение true, то появившееся уведомление не будет исчезать автоматически, с течением времени. Иначе, время существования уведомления задается в свойстве life.
glue:string('after')
Определяет, каким образом будут добавляться новые уведомления, если не старые еще на экране. Возможные значения 'before' и 'after' (до и после).
position:string('top-righ')
Определяет расположение уведомлений. Возможные значения: 'top-left', 'top-right', 'bottom-left', 'bottom-right' и 'center'. Это свойство необходимо устанавливать в настройках по умолчанию ($.jGrowl.defaults), до запуска первого уведомления.
theme:string('default')
Задает класс, который будет присвоен элементу с запускаемым уведомлением.
corners:string('10px')
Если к странице подключен плагин jQuery corners, то с помощью этого свойства можно задать радиус скругления уголков у элементов уведомлений.
check:integer(1000)
Определяет период (в миллисекундах) через который будет происходить проверка необходимости закрытия активных уведомлений на экране.Это свойство необходимо устанавливать в настройках по умолчанию ($.jGrowl.defaults), до запуска первого уведомления.
life:integer(3000)
Определяет время жизни уведомления. Имеет смысл только при выключенном параметре sticky. Если он включен, то уведомление будет оставаться на экране, до тех пор, пока пользователь не закроет его вручную.
speed:string,integer('normal')
Определяет время выполнения анимации открытия и закрытия уведомлений. Кроме этого свойства, в настройке анимации участвуют так же easing, animateOpen и animateClose.
easing:string('swing')
Определяет динамику выполнения анимации открытия и закрытия уведомлений. Кроме этого свойства, в настройке анимации участвуют так же speed, animateOpen и animateClose.
closer:boolean,function(true)
Определяет, нужно ли создавать элемент closer (он будет появляться когда открыто более одной вкладки. При нажатии на него все вкладки будут закрыты). Это свойство может быть задано функцией, которая будет вызываться при нажатии на элемент closer. closer необходимо устанавливать в настройках по умолчанию ($.jGrowl.defaults), до запуска первого уведомления.
closeTemplate:string('×')
Определяет содержимое элемента закрывающего уведомление. По умолчанию, это '×', являющейся кодом спецсимвола '×' (крестик). Это свойство необходимо устанавливать в настройках по умолчанию ($.jGrowl.defaults), до запуска первого уведомления.
closerTemplate:string('<div>[ close all ]'</div>')
Определяет содержимое элемента closer — элемента закрывающего ВСЕ уведомления. Это свойство необходимо устанавливать в настройках по умолчанию ($.jGrowl.defaults), до запуска первого уведомления.
log:function(пустая функция)
Функция заданная в этом свойстве будет вызываться непосредственно перед открытием уведомления, раньше всех других обработчиков. log создано на случай, если на сайте ведется система логов (записи) происходящих уведомлений. При вызове, функция будет получать три параметра:
  • Объект jQuery с текущим элементом уведомления.
  • Текст сообщения.
  • Объект с текущими настройками. Если необходимо получить заголовок уведомления, его нужно будет вытаскивать отсюда. Во втором параметре заголовок фигурировать не будет.
beforeOpen:function(пустая функция)
Функция которая будет вызываться непосредственно перед открытием уведомления. При вызове, функция будет получать три параметра:
  • Объект jQuery с текущим элементом уведомления.
  • Текст сообщения.
  • Объект с текущими настройками. Если необходимо получить заголовок уведомления, его нужно будет вытаскивать отсюда. Во втором параметре заголовок фигурировать не будет.
open:function(пустая функция)
Функция которая будет вызываться сразу после открытия уведомления. При вызове, функция будет получать три параметра:
  • Объект jQuery с текущим элементом уведомления.
  • Текст сообщения.
  • Объект с текущими настройками. Если необходимо получить заголовок уведомления, его нужно будет вытаскивать отсюда. Во втором параметре заголовок фигурировать не будет.
beforeClose:function(пустая функция)
Функция которая будет вызываться непосредственно перед закрытием уведомления. При вызове, функция будет получать три параметра:
  • Объект jQuery с текущим элементом уведомления.
  • Текст сообщения.
  • Объект с текущими настройками. Если необходимо получить заголовок уведомления, его нужно будет вытаскивать отсюда. Во втором параметре заголовок фигурировать не будет.
close:function(пустая функция)
Функция которая будет вызываться сразу после закрытия уведомления. При вызове, функция будет получать три параметра:
  • Объект jQuery с текущим элементом уведомления.
  • Текст сообщения.
  • Объект с текущими настройками. Если необходимо получить заголовок уведомления, его нужно будет вытаскивать отсюда. Во втором параметре заголовок фигурировать не будет.
animateOpen:object({opacity:'show'})
В данном объекте можно настроить вид анимации, с которой будет происходить открытие уведомления. Кроме этого свойства, в настройке анимации участвуют так же easing, speed и animateClose.

Замечание: странным образом, у меня не стали работать анимации, в которых участвовало свойство height.

animateClose:object({opacity:'hide'})
В данном объекте можно настроить вид анимации, с которой будет происходить закрытие уведомления. Кроме этого свойства, в настройке анимации участвуют так же easing, speed и animateOpen.

Замечание: странным образом, у меня не стали работать анимации, в которых участвовало свойство height.

Основой оформления является свойство theme, в котором можно указать класс для элементов с содержимым уведомлений. Оформление jGrowl связано с темизацией jQuery UI. Благодаря этому можно настраивать внешний вид уведомлений с ее помощью:

  • Сделать необходимые настройки в ThemeRoller (логичнее всего будет настроить стили Highlight для блоков с уведомлениями).
  • Скачать получившиеся файлы со стилями и изображениями.
  • Подключить css к странице
  • Указать нужный класс в параметре theme (если вы настраивали оформление для Highlight, то соответствующий класс будет ui-state-highlight).

Естественно, можно задать стили для указанного в theme класса самостоятельно и не прибегать к помощи jQuery UI.