12 февр. 2010 • 3 мин чтения • Автор RAMe0

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

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

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

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.8/jquery.jgrowl.min.css" />
<script src="https://code.jquery.com/jquery-3.6.4.min.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.8/jquery.jgrowl.min.js"></script>

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

$.jGrowl("Hello world!");

Попробовать

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

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

Попробовать

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

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

Попробовать

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

$.jGrowl("Я зову beforeClose коллбэк функцию и использую другую анимацию.", {
    beforeClose: function(e,m) {
        $.jGrowl('Я почти закрылось!');
    },
    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	×	Этот контент используется для создания индивидуальной кнопки «закрыть» для сообщений. Данная опция должна быть изменена до вызова метода запуска.
closerTemplate	[ close all ]	Здесь можно заменить текст для кнопки «закрыть все», для случаев, когда в стеке больше одного сообщения. Данная опция должна быть изменена до вызова метода запуска.
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).

Теги: jQuery, user-interface, Web-programing