Demo

Basic Usage :

The most simple way to use Ggrowl is to call the 'show' function:

$.Ggrowl.show("hello world")

Position :

// position = "bottom-right" defult

$.Ggrowl.show('hello world',{'position':'bottom-left'})

// position = "bottom-right" or "bottom-left" or "top-left" or "top-right"

Message :

$.Ggrowl.show('hello world',{'message':'This is a simple notification'})

Using Icons :

Font Awesome will allow you to put one of 675 icons on your notificaton . All you have to do is include the font awesome class name, but without the "icon-" prefix. To see a list of all 675 icon class names, see the Font Awesome project home page . So this allows us to include an icon like this:

$.Ggrowl.show('hello world',{'icon':'fa-comment'})

example : ' fa-comment '

//atrib : ' iconColor ' for change color icon [ exmpl : $.Ggrowl.show('hello world',{'icon':'fa-comment','iconColor':'red'}) ]

Image :

The most simple way to use Ggrowl is to call the 'show' function:

//example : Url Image = "image/ico.jpg"

$.Ggrowl.show('hello world',{'imageUrl':'images/ico.jpg'})

//atrib : ' imgHeight ' and 'imgWhite' for change Height and White image [ exmpl : $.Ggrowl.show('hello world',{'imageUrl':'images/ico.jpg','imgWhite':'40','imgHeight':'40'}) ]

buttons :

buttons Ok :

$.Ggrowl.show('hello world',{'btnOK':true})

$.Ggrowl.show('hello world',{'btnCancel':true})

$.Ggrowl.show('hello world',{'btnYes':true,'btnNo':true})

$.Ggrowl.show('hello world',{'btnHelp':true})