Notyfy - Yet another jQuery notification plugin

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 notyfy from the Github and upload the files to your server.

Include jquery.notyfy.js and its dependancies below jQuery.
Also add themes/default.css to your header. Or some other theme.

notyfy is compatible with jQuery 1.5+ for now.

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="jquery.notyfy.js"></script>
<script type="text/javascript" src="jquery.notyfy.css"></script>


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

Creating a notyfy

We wrote a helper for creating notyfy easily. So you can use notyfy(properties); Just like this;

Returns a notyfy javascript object. (not jquery dom object, but you can access dom with this object)

							
var notyfy = notyfy({text: 'notyfy - Yet another jQuery notification plugin'});
							
							

Options & Defaults

Available options listed below.

						
$.notyfy.defaults = {
	layout: 'top',
	theme: 'default',
	type: 'alert',
	text: '',
	dismissQueue: true, // If you want to use queue feature set this true
	template: '<div class="notyfy_message"><span class="notyfy_text"></span><div class="notyfy_close"></div></div>',
	showEffect:  function(bar) { bar.animate({ height: 'toggle' }, 500, 'swing'); },
	hideEffect:  function(bar) { bar.animate({ height: 'toggle' }, 500, 'swing'); },
	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']
	events: {
		show: null,
		hide: null,
		shown: null,
		hidden: null
	},
	buttons: false // an array of buttons
};
						
						

Custom Container

Just like this;

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

Theme (But How?)

notyfyCSS is easily themable using CSS. See the themes/default.css theme for details

After that you can set your new theme with notyfy theme property. Like;

						
	var notyfy_id = notyfy({
		text: 'notyfy - a jquery notification library!',
		theme: 'your_new_theme',
	});
						
						

Buttons

We can set button objects with an array like above;

						
notyfy({
	text: 'Do you want to continue?', 
	buttons: [{
		addClass: 'btn btn-primary',
		text: 'Ok',
		onClick: function($notyfy) {
				// this = button element
				// $notyfy = $notyfy element

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

Callbacks

notyfyCSS has 4 events that you can bind() too!

show - hide - shown - hidden

API

$.notyfy.get(id) - Returns a notyfy javascript object

$.notyfy.close(id) - Close a notyfy - same as var n = notyfy({text: 'Hi!'})); n.close();

$.notyfy.clearQueue() - Clears the notification queue

$.notyfy.closeAll() - Close all notifications

$.notyfy.setText(id, text) - Notification text updater - same as var n = notyfy({text: 'Hi!'})); n.setText('Hi again!');

$.notyfy.setType(id, type) - Notification type updater - same as var n = notyfy({text: 'Hi!'})); n.setType('error');

Github Commit History

Committer	Message	Date
Loading...