- AdminPlus
- Components
- Notifications
Notyfy Notifications plugin
Top notifications
Alert
Success
Danger
Warning
Information
Confirm
Left
Top
Center
Bottom
Center
Center notification
Right
Top
Center
Bottom
Creating a notyfy
var notyfy = notyfy(
{
text: 'notyfy - Yet another jQuery notification plugin',
type: 'primary' // alert|error|success|information|warning|primary|confirm
});
Default Options
$.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
};
Gritter Notifications plugin
Color options
Light
Dark
Primary
Other examples
Add sticky notification Has to be manually removed
Add notification without image
Add white notification Has a "gritter-light" class applied
Add notification with max. of 3 Only if there are less than 4 messages already on screen
Creating a Regular Gritter
$.gritter.add({
// (string | mandatory) the heading of the notification
title: 'This is a regular notice!',
// (string | mandatory) the text inside the notification
text: 'This will fade out after a certain amount of time.',
// (string | optional) the image to display on the left
image: 'http://yourimage.url/image.png',
// (bool | optional) if you want it to fade out on its own or just sit there
sticky: false,
// (int | optional) the time you want it to be alive for before fading out
time: ''
});
Creating a Primary Gritter
$.gritter.add({
title: 'This is a primary notice!',
text: ' Lorem ipsum ...',
image: 'your image URL goes here'
class_name: 'gritter-primary'
});

Romanian
Italian
French
Polish