Homepage:
http://sciactive.com/pnotify/
Author(s): Hunter Perrin
Version: 1.2.0
Full featured plugin to show temporary floating messages for status updates, actions and errors.
Usage
Call
$.pnotify(options)
to show a notification.
Most common options:
-
title
: the title
-
text
: the message text
-
delay
: milliseconds to show the message
-
opacity
: value from 0
(fully transparent) to 1
(opaque)
-
nonblock
: true
if items below the message should be clickable
-
type
: 'error'
if an error message
Option |
Comment |
Default value |
title |
The notice's title |
false |
title_escape |
Whether to escape the content of the title. (Not allow HTML.) |
false |
text |
The notice's text |
false |
text_escape |
Whether to escape the content of the text. (Not allow HTML.) |
false |
styling |
What styling classes to use. (Can be either jqueryui or bootstrap.) |
jqueryui |
addclass |
Additional classes to be added to the notice (for custom styling) |
"" |
cornerclass |
Class to be added to the notice for corner styling. |
"" |
nonblock |
Create a non-blocking notice; it lets the user click elements underneath it |
false |
nonblock_opacity |
The opacity of the notice (if it's non-blocking) when the mouse is over it |
0.2 |
history |
Display a pull down menu to redisplay previous notices, and place the notice in the history |
false |
width |
Width of the notice |
"300px" |
min_height |
Minimum height of the notice; it will expand to fit content |
"16px" |
type |
Type of the notice. "notice", "info", "success", or "error" |
"notice" |
icon |
Set icon to true to use the default icon for the selected style/type, false for no icon, or a string for your own icon class. |
true |
animation |
The animation to use when displaying and hiding the notice. "none", "show", "fade", and "slide" are built in to jQuery. Others require jQuery UI. Use an object with effect_in and effect_out to use different effects. |
"fade" |
animate_speed |
Speed at which the notice animates in and out; "slow" , "def" or "normal" , "fast" or number of milliseconds |
"slow" |
opacity |
Opacity of the notice |
1 |
shadow |
Display a drop shadow |
false |
closer |
Provide a button for the user to manually close the notice |
true |
closer_hover |
Only show the closer button on hover. |
true |
sticker |
Provide a button for the user to manually stick the notice. |
true |
sticker_hover |
Only show the sticker button on hover. |
true |
hide |
After a delay, remove the notice |
true |
delay |
Delay in milliseconds before the notice is removed |
8000 |
mouse_reset |
Reset the hide timer if the mouse moves over the notice |
true |
remove |
Remove the notice's elements from the DOM after it is removed |
true |
insert_brs |
Change newlines to br tags |
true |
stack |
The stack on which the notices will be placed. Also controls the direction the notices stack. |
{"dir1": "down", "dir2": "left", "push": "bottom", "spacing1": 25, "spacing2": 25} |
before_init |
function called when the message is being initialized |
|
after_init |
function called when the message has been initialized |
|
before_open |
called when a message is about to be closed |
|
after_open |
called when the message has been displayed |
|
before_close |
called before a message is closed |
|
after_close |
called when a message has been closed |
|
See for examples the
plugin example page.
The plugin uses the jQuery UI CSS library for styling, which means it is fully and easily themeable.
Examples