A simple, lightweight notification plugin for jQuery.
Sticky allows developers to quickly and easily display messages to users via a simple and streamlined notification center. Sticky is unique in that it groups multiple messages together to help keep your beautiful interface clutter-free.
Sticky is only 1.3k for the minified version and 3.1k for the full.
Using Sticky is easy.
- Include jQuery, sticky.min.js, and sticky.css
- Send messages!
Plain note, default options
$.sticky('I am a plain text note. Nothing special about me.');
Plain note, default options, html content
$.sticky('<b>Greetings</b>. I am an HTML note.');
Plain note, default options, custom callback function
$.sticky('I am a plain text note. I'll tell you good job!.', callback);
Overriding classList and speed
$.sticky('Upload complete', {classList: 'success', speed: 'slow'});
Overriding position
$.sticky('I'm at the bottom! Look at me!, {position: 'bottom-center'});
Overriding classList with warning class.
$.sticky('Careful, there be dragons ahead', {classList: 'warning'});
Overriding classList, making note stay open.
$.sticky('I give up, it just won't work.', {classList: 'important', autoclose: 0});
Overriding classList, allowing no duplicates.
$.sticky('I just wanted you to know', {classList: 'info', allowdupes: false});
Sticky takes an optional callback function which receives an object containing information about the note just added:
$.sticky(note, options, function(response) {
JSON.stringify(response);
});
var response = {
'id': uniqID, // Generated ID, a hash of the message contents.
'duplicate': duplicate, // whether this note was a duplicate
'displayed': display, // whether the note was displayed
};
var options = {
position: 'top-right', // top-left, top-center, top-right, bottom-left, bottom-center, or bottom-right
speed: 'fast', // animations: fast, slow, or integer
allowdupes: true, // true or false
autoclose: 5000, // delay in milliseconds. Set to 0 to remain open.
classList: '' // arbitrary list of classes. Suggestions: success, warning, important, or info. Defaults to ''.
};
So you'd rather build your own copy of Sticky, or want to run the unit tests? To get started running them please take the following steps:
Okay, for real. Do these things:
- Download this repo
- Run
npm install
- Run
grunt
This will compile the new CSS and JS files into the dist
directory.
You are invited to contribute code and suggestions to this project. The more the merrier.
- jQuery: MIT/GPL license
MIT/GPL license