jQuery growl notification plugin

The JavaScript

Below is the JavaScript that is used in the demo this plugin simply extends the jQuery framework, allowing you to activate a message box by calling the function ‘noticeAdd()’.

One interesting feature of this plugin is that it allows you to append a CSS class to the popup notice which can then be styled.

For example with the error message I’m appending the .error class and in the CSS i’m just adding a background color.

$(document).ready(function()

{

jQuery.noticeAdd({

text: 'This is a simple notification using the jQuery notice plugin. Click the X above to remove this notice.',

stay: true

});

$('.add').click(function()

{

jQuery.noticeAdd({

text: 'This is a notification that you have to remove',

stay: true

});

});

$('.add2').click(function()

{

jQuery.noticeAdd({

text: 'This is a notification that will remove itself',

stay: false

});

});

$('.add3').click(function()

{

jQuery.noticeAdd({

text: 'This is an error notification!',

stay: false,

type: 'error'

});

});

$('.add4').click(function()

{

jQuery.noticeAdd({

text: 'This is a success notification!',

stay: false,

type: 'success'

});

});

$('.remove').click(function()

{

jQuery.noticeRemove($('.notice-item-wrapper'), 400);

});

});

The HTML

<ul>

<li class="add">Click here to see a notification that you have to remove</li>

<li class="add2">Click here to see a notification that does not stay</li>

<li class="add3">Error Notification</li>

<li class="add4">Success Notification</li>

<li class="remove">Remove all active notifications</li>

</ul>

출처 - http://papermashup.com/jquery-growl-notification-plugin/