Легкий jQuery плагин для информационных сообщений Growler

Создавать красивые оповещения - признак вежливости

Понравилась статья? Оставьте оценку:

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(1 голос, в среднем: 1 из 5)

Сегодня опробовали плагин Growler, который упрощает вывод информационных сообщений на сайте. Вывод сообщений об ошибках, удачных действиях и прочее. Очень удобная штука, если используются AJAX действия, например, AJAX-лайки, голосования и тому подобное. Легко и просто можно оповестить пользователя о удачных/неудачных попытках проголосовать.

ГДЕ его использовать — решать вам, а я покажу КАК его использовать.

Первым делом качаем его с официальной страницы гитхаба. И подключаем необходимые стили и скрипты.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="javascript/jquery.growl.js" type="text/javascript"></script>
<link href="stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />

Вторым шагом — собственно выводим сами предупреждения.

<script type="text/javascript">
$.growl({ title: "Growl", message: "Просто сообщение" });
$.growl.error({ message: "Ошибка" });
$.growl.notice({ message: "Успех" });
$.growl.warning({ message: "Предупреждение" });
</script>

Третьим шагом — настроим наши оповещения. Существуют такие опции:

  • fixed: (true / false) включить или выключить сокрытие оповещений (По умолчанию: false)
  • size: (‘small’ / ‘medium’ / ‘large’) настроить размер (По умолчанию: ‘medium’)
  • style: (‘default’ / ‘error’ / ‘notice’ / ‘warning’) стиль оповещений (По умолчанию: ‘default’)
  • location: (‘tl’ / ‘tr’ / ‘bl’ / ‘br’ / ‘tc’ / ‘bc’) позиция оповещений. tl = top-left(сверху слева), tr = top-right(сверху справа) ну и так далее. (По умолчанию: ‘tr’)
  • delayOnHover: (true / false) Не скрывать оповещение, если на него наведен курсор. (По умолчанию: true)

Настройка происходит таким образом:

$.growl({ title: "Growl", message: "Просто сообщение", size: "small", location: "br" });

Ну в общем-то и все, использовать плагин очень легко и просто.

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