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

There are lots of other options in the API to customise the text, animation, speed, buttons and much more.

It also has various callbacks for the buttons, opening closing the notifications and queue control.

Layouts & Demos

Installation

Include jQuery latest release in your header. 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/jquery.noty.js and its dependancies below jQuery.
Also add noty/layouts/top.js (you can use more layouts if you want) and noty/themes/default.js to your header. Or some other theme.

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:

						
<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/jquery.noty.js"></script>

<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<script type="text/javascript" src="js/noty/layouts/topLeft.js"></script>
<script type="text/javascript" src="js/noty/layouts/topRight.js"></script>
<!-- You can add more layouts if you want -->

<script type="text/javascript" src="js/noty/themes/default.js"></script>
						
						

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)

							
var noty = noty({text: 'noty - a jquery notification library!'});
							
							

Options & Defaults

Available options listed below.

						
$.noty.defaults = {
	layout: 'top',
	theme: 'defaultTheme',
	type: 'alert',
	text: '',
	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,
	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;

						
var noty = $('.custom_container').noty({text: 'noty - a jquery notification library!'});
						
						

Theme (But How?)

noty is easily themable using Javascript or CSS. But my English is not enough for the explain how. :(

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 noty_id = noty({
		text: 'noty - a jquery notification library!',
		theme: 'your_new_theme',
	});
						
						

Buttons

We can set button objects with an array like above;

						
noty({
	text: 'Do you want to continue?',
	buttons: [
		{addClass: 'btn btn-primary', text: 'Ok', onClick: function($noty) {

				// this = button element
				// $noty = $noty element

				$noty.close();
				noty({text: 'You clicked "Ok" button', type: 'success'});
			}
		},
		{addClass: 'btn btn-danger', text: 'Cancel', onClick: function($noty) {
				$noty.close();
				noty({text: 'You clicked "Cancel" button', type: 'error'});
			}
		}
	]
});
						
						

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');

Github Commit History

Committer	Message	Date
Loading...