You are here: Foswiki>System Web>JQueryPlugin>JQueryPNotify (2024-12-23, UnknownUser)Edit Attach

JQueryPNotify

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

Topic revision: r1 - 2024-12-23, UnknownUser

System

Copyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback