c 9-00 до 18-00
Создавать красивые оповещения - признак вежливости
Сегодня я опробовал плагин 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>
Третьим шагом покажу какие существуют опции, на примере более детальной настройки плагина. PS. Заранее определены значения, установленные по умолчанию:
$.growl({
fixed: false, // (true / false) включить или выключить сокрытие оповещений
size: 'medium', // ('small' / 'medium' / 'large') настроить размер
style: 'default', // ('default' / 'error' / 'notice' / 'warning') стиль оповещений
location: 'br', // ('tl' / 'tr' / 'bl' / 'br' / 'tc' / 'bc') позиция оповещений
delayOnHover: true, // (true / false) не скрывать оповещение, если на него наведен курсор
title: 'Growl', // заголовок
message: 'Просто сообщение' // сообщение
});
Ну в общем-то и все, использовать плагин очень легко и просто.