Держим юзера в курсе с помощью jGrowl

12 Фев
2010

Нашел хороший плагин на jQuery, для ненавязчивого уведомления пользователей, о результатах и деятельности на сайте. Называется jGrowl. Работает плагин на подобии Growl Framework’а в OS X’s.
О том как им воспользоваться, читайте дальше.

Использовать его очень просто:
Сначала подключаем стиль плагина, библиотеку jQuery и сам плагин jGrowl к сайту:

<link rel="stylesheet" href="javascript/jgrowl/jquery.jgrowl.css" type="text/css" />
<script src="javascript/jgrowl/jquery.js" type="text/javascript"></script>
<script src="javascript/jgrowl/jquery.jgrowl.js" type="text/javascript"></script>

Примеры вызова сообщения:
Такой вариант просто покажет сообщение и скроет его через 3000 миллисекунд (по умолчанию)

$.jGrowl("Hello world!");

Пример

Такой вариант покажет сообщение, которое не исчезнет, пока пользователь сам его не закроет

$.jGrowl("Я залипло!", { sticky: true });

Пример

А так выведется сообщение с заголовком

$.jGrowl("Я сообщение с заголовком!", { header: 'Привет!' });

Пример

Это пример обработки коллбэк функции, вызываемой перед закрытием сообщения

$.jGrowl("Я зову beforeClose коллбэк функцию и использую другую анимацию.", {
    beforeClose: function(e,m) {
        alert('Я почти закрылось!');
    },
    animateOpen: {
        height: 'show'
    }
});

Пример

Теперь подробнее о доступных опциях:

Опция: Значение по умолчанию: Описание
header empty string Не обязательный параметр. Добавляет к выводимому сообщению заголовок.
sticky false Если true, то сообщение не будет закрыто, пока пользователь его сам не закроет
glue after Данная опция определяет, как будет выведено сообщение в стеке сообщений: в начале или в конце стека. Доступные параметры: after or before.
position top-right Определяет класс, который присваивается контейнеру сообщений. Данный класс задает позицию контейнера на экране. По умолчанию доступны пять вариантов: top-left, top-right, bottom-left, bottom-right, center. Данная опция должна быть изменена до вызова метода запуска.
theme default CSS класс, который будет применен к данному сообщению
corners 10px Если плагин corners jQuery подключен, то этот параметр устанавливает радиус скругления окошка с сообщением.
check 1000 Частота, с которой jGrowl должен проверять, нужно ли уже удалить какое либо сообщение с экрана. Данная опция должна быть изменена до вызова метода запуска.
life 3000 Время жизни сообщения на экране.
speed normal Скорость анимации открытия/закрытия сообщений
easing swing Easing метод который будет использован для анимации закрытия/открытия сообщения.
closer true Данная опция отключает/включает кнопку «закрыть все», для случаев, когда на экране показано больше одного сообщения. Дополнительно, эта опция может быть использована для установки коллбэк функции на событие нажатия кнопки «закрыть все». Данная опция должна быть изменена до вызова метода запуска.
closeTemplate &times; Этот контент используется для создания индивидуальной кнопки «закрыть» для сообщений. Данная опция должна быть изменена до вызова метода запуска.
closerTemplate <div>[ close all ]</div> Здесь можно заменить текст для кнопки «закрыть все», для случаев, когда в стеке больше одного сообщения. Данная опция должна быть изменена до вызова метода запуска.
log function(e,m,o) {} Коллбэк событие, вызываемое до того, как что либо сделано с сообщением. Ее можно использовать, если нужно организовать что то типа механизма логгирования всех сообщений, отправленных с помощью jGrowl. Функция получит в качестве входных параметров DOM контекст сообщения, текст сообщения и объект с настройками этого сообщения.
beforeOpen function(e,m,o) {} Коллбэк событие возникающее перед открытием сообщения. Коллбэк функция получит в качестве входных параметров DOM контекст сообщения, текст сообщения и объект с настройками этого сообщения.
open function(e,m,o) {} Коллбэк событие, возникающее после открытия сообщения. Коллбэк функция получит в качестве входных параметров DOM контекст сообщения, текст сообщения и объект с настройками этого сообщения.
beforeClose function(e,m,o) {} Коллбэк событие, вызываемое перед закрытием сообщения. Коллбэк функция получит в качестве входных параметров DOM контекст сообщения, текст сообщения и объект с настройками этого сообщения.
close function(e,m,o) {} Коллбэк событие, вызываемое после закрытием сообщения. Коллбэк функция получит в качестве входных параметров DOM контекст сообщения, текст сообщения и объект с настройками этого сообщения.
animateOpen { opacity: ‘show’ } Опции анимации при открытии сообщения (по умолчанию fadeOut).
animateClose { opacity: ‘hide’ } Опции анимации при закрытия сообщения(по умолчанию fadeIn).

Архив с данным плагином и примерами его работы можно скачать тут (версия 1.2.4)
Перейти на сайт плагина

2leep.com

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

*

Наверх