You are here: Foswiki>System Web>JQueryPlugin>JQueryPNotify (06 Aug 2023, 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

Edit  | Attach | Print version | History: r1 | Backlinks | View wiki text | Edit wiki text | More topic actions
Topic revision: r1 - 06 Aug 2023, UnknownUser
This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback