Как сделать красивые уведомления на JQuery.
![Как сделать красивые уведомления на JQuery.](/images/articles/jquery-noty-plugin.jpg)
Всем привет! Сегодня мы поговорим про то, как сделать всплывающие уведомления на JQuery, используя плагин Noty.
Чтобы посмотреть множество примеров, перейдите по этой ссылке, пролистните страницу до заголовка Layouts & Demos и понажимайте на кнопочки.
Эти уведомления могут появляться в разных местах на странице и с разным оформлением, все это вы можете задать сами.
В начале страницы вы можете найти кнопку Download, по которой можно скачать все необходимое.
Рассмотрим использование. Скачайте файлы и подключите их
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/noty/packaged/jquery.noty.packaged.min.js"></script>
Создайте объект noty, как указано ниже
var n = noty({text: 'noty - a jquery notification library!'});
В свойстве text вы можете указать текст, который будет показан в уведомлении.
Также у этого плагина достаточно много опций
$.noty.defaults = {
layout: 'top',
theme: 'defaultTheme',
type: 'alert',
text: '', // может быть html кодом или строкой
dismissQueue: true, // Если вы хотите использовать функцию очереди, установите значение true
template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
animation: {
open: {height: 'toggle'},
close: {height: 'toggle'},
easing: 'swing',
speed: 500 // скорость появления и исчезновения уведомления
},
timeout: false, // задержка перед закрытием уведомления. Установите false для липких уведомлений
force: false, // добавляет уведомление в начало очереди, если установлено true
modal: false,
maxVisible: 5, // вы можете установить максимальную видимость уведомления для удаления из очереди
killer: false, // для закрытия всех уведомлений до показа
closeWith: ['click'], // ['click', 'button', 'hover']
callback: {
onShow: function() {},
afterShow: function() {},
onClose: function() {},
afterClose: function() {}
},
buttons: false // массив кнопок
};
Этого уже более, чем достаточно, чтобы успешно использовать данный плагин. Подробнее вы можете почитать все на том же официальном сайте по ссылке в начале статьи.
А у меня на этом все. Спасибо за внимание и удачи!
-
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.