Hi!
noty is a jQuery plugin that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue. (Optional)
The notifications can be positioned at the:
top - topLeft - topCenter - topRight - center - centerLeft - centerRight - bottom - bottomLeft - bottomCenter - bottomRight
The API provides lots of other options to customise the text, animation, speed, buttons and much more.
It also has various callbacks for the buttons such as opening and closing the notifications and queue control.
Layouts & Demos
Top
Alert
Success
Error
Warning
Information
Confirm
TopLeft
Alert
Success
Error
Warning
Information
Confirm
TopCenter
Alert
Success
Error
Warning
Information
Confirm
TopRight
Alert
Success
Error
Warning
Information
Confirm
CenterLeft
Alert
Success
Error
Warning
Information
Confirm
Center
Alert
Success
Error
Warning
Information
Confirm
CenterRight
Alert
Success
Error
Warning
Information
Confirm
BottomLeft
Alert
Success
Error
Warning
Information
Confirm
BottomCenter
Alert
Success
Error
Warning
Information
Confirm
BottomRight
Alert
Success
Error
Warning
Information
Confirm
Bottom
Alert
Success
Error
Warning
Information
Confirm
Installation
Include the latest release of jQuery before your noty files. The Google AJAX Libraries API can be used for this but you could also host the library yourself.Download noty from the Github and upload the files to your server.
Include noty/packaged/jquery.noty.packaged.min.js and its dependancies below jQuery.noty is compatible with jQuery 1.6+ for now. But if you are using older version then 1.6 you can add promise.js to your header. (Thanks for Maksim Pecherskiy)
Your code should then be similar to this:
Creating a noty
We wrote a helper for creating noty easily. So you can use noty(properties); Just like this;Returns a noty javascript object. (not jquery dom object, but you can access dom with this object)
Also, you can give any html to "text" option.
var n = noty({text: 'noty - a jquery notification library!'});
Options & Defaults
Available options listed below.
$.noty.defaults = {
layout: 'top',
theme: 'defaultTheme',
type: 'alert',
text: '', // can be html or string
dismissQueue: true, // If you want to use queue feature set this 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 // opening & closing animation speed
},
timeout: false, // delay for closing event. Set false for sticky notifications
force: false, // adds notification to the beginning of queue when set to true
modal: false,
maxVisible: 5, // you can set max visible notification for dismissQueue true option,
killer: false, // for close all notifications before show
closeWith: ['click'], // ['click', 'button', 'hover']
callback: {
onShow: function() {},
afterShow: function() {},
onClose: function() {},
afterClose: function() {}
},
buttons: false // an array of buttons
};
Custom Container
Just like this; (Dependency: layouts/inline.js)
var n = $('.custom_container').noty({text: 'noty - a jquery notification library!'});
Try!
Alert Success ErrorWarning Information Confirm
Custom Container
Theme
noty is easily themable using Javascript or CSS.
Theme structre is in noty/themes/default.js file. You can copy-paste this file and change.
After that you can set your new theme with noty theme property. Like;
var n = noty({
text: 'noty - a jquery notification library!',
theme: 'your_new_theme',
});
Callbacks
noty have 4 callback option for now. We will add more callback asap.
onShow - afterShow - onClose - afterClose
API
$.noty.get(id) - Returns a noty javascript object
$.noty.close(id) - Close a noty - same as var n = noty({text: 'Hi!'})); n.close();
$.noty.clearQueue() - Clears the notification queue
$.noty.closeAll() - Close all notifications
$.noty.setText(id, text) - Notification text updater - same as var n = noty({text: 'Hi!'})); n.setText('Hi again!');
$.noty.setType(id, type) - Notification type updater - same as var n = noty({text: 'Hi!'})); n.setType('error');