PNotify notifications
PNotify is a JavaScript
notificationlibrary, formerly known as Pines Notify. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use. PNotify supports desktop notifications, modulues, stacks and flexible theming. Desktop notifications are based on the web notificationsdraft. If desktop notifications are not available or not allowed, PNotify will fall back to displaying the notice as a regular, in-browser notice.
| Solid color notifications | ||
|---|---|---|
| Primary notice |
Primary notice. To use, add .bg-primarycolor class to the plugin configuration options
|
|
| Danger notice |
Danger notice. To use, add .bg-dangercolor class to the plugin configuration options
|
|
| Success notice |
Success notice. To use, add .bg-successcolor class to the plugin configuration options
|
|
| Warning notice |
Warning notice. To use, add .bg-warningcolor class to the plugin configuration options
|
|
| Info notice |
Info notice. To use, add .bg-infocolor class to the plugin configuration options
|
|
| Custom color notice |
Notice with custom background color. To use, add custom .bg-*color class to the plugin configuration options
|
|
| Left icon |
Solid color notification with left icon. To use, add 'bg-* alert-styled-left'to the addclass: '...'option
|
|
| Right icon |
Solid color notification with right icon. To use, add 'bg-* alert-styled-right'to the addclass: '...'option
|
|
| Basic notifications | ||
| Default notice |
Basic pnotify notification. All notification color styles correspond to the Boostrap's alertcomponent
|
|
| Success notice |
Success notice. To use, add type: 'success'to the plugin configuration
|
|
| Danger notice |
Danger notice. To use, add type: 'error'to the plugin configuration
|
|
| Info notice |
Info notice. To use, add type: 'info'to the plugin configuration
|
|
| Left positioned icon |
Notification with left positioned icon. To use, add 'alert-styled-left'to the addclass: '...'option
|
|
| Right positioned icon |
Notification with right positioned icon. To use, add 'alert-styled-right'to the addclass: '...'option
|
|
| Display arrow |
Display arrow in styled notifications. To use, add 'alert-arrow-left'or '*-right'to the addclass: '...'option
|
|
| Notice with custom color | Notification with custom background/border/text color. Text, background and border color can be changed by adding proper classes to the plugin configuration | |
| Desktop notifications | ||
| Default notice | The first time you click one of these buttons, you will be asked to grant permission for this site to show notices. Then you can click them again to see the desktop notification | |
| Danger notice | Danger desktop notification using a custom contextual icon. If permission denied, this icon will be hidden | |
| Success notice | Success desktop notification using a custom contextual icon. If permission denied, this icon will be hidden | |
| Warning notice | Warning desktop notification using a custom contextual icon. If permission denied, this icon will be hidden | |
| Info notice | Info desktop notification using a custom contextual icon. If permission denied, this icon will be hidden | |
| Notification options | ||
| No title |
Notification without title. This is a default option, the title won't be shown if it isn't specified in notification configuration
|
|
| Rich notice |
By default notification supports richcontent, including typography components, links, icons, buttons etc
|
|
| Click to close |
Notification can be closed on a closerbutton click or on a notification itself via click()event
|
|
| Form notice |
Notification with formcomponents. Form is inserted as a DOM object
|
|
| Sticky notice |
Sticky notification. To use, add hide: falseto the notification configuration
|
|
| No sticky button |
Notification with hidden stickybutton. To use, add button.sticker: falseto the notification config
|
|
| Permanent buttons |
By default, notification control buttons appear on hover. To make them always visible, add buttons.closer_hover: false
|
|
| Permanotice |
To show permanentnotification, make it sticky and hide control buttons
|
|
| PNotify modules | ||
| Confirmation |
Confirmation dialog with callbacks. To use, add confirm.confirm: trueto the notice config
|
|
| Prompt |
Prompt dialog with callbacks. To use, add confirm.prompt: trueto the notice config
|
|
| Multi line |
Multi line prompt dialog with textarea. To use, add prompt_multi_line: trueto the notice config
|
|
| Custom buttons |
Notification with custombuttons and callbacks
|
|
| With callbacks |
Notification callbacks. Available callbacks: before and after init, before and after open, before and after close
|
|
| Switching notices |
PNotify supports dynamic notification change. Here notifications are switching using before_closecallback
|
|
| Progress loader |
Notification with dynamic progressbar. Here before_opencallback is used
|
|
| Dynamic loader |
Notification with dynamiccontent. The content changes in a given time interval using update()function
|
|
| PNotify stacks | ||
| Top left | Top left stack. Moves down, then right. Pushes to stack top | |
| Bottom left | Bottom left stack. Moves right, then up. Pushes to stack top | |
| Bottom right | Bottom right stack. Moves up, then left. Pushes to stack bottom | |
| Custom left | Left stack with custom position. Moves right, then down. Pushes to stack bottom | |
| Custom right | Right stack with custom position. Moves left, then up. Pushes to stack top | |
| Top bar | Top bar stack style. Moves down, then right. Pushes to stack top | |
| Bottom bar | Bottom bar>stack style. Moves up, then right. Pushes to stack bottom | |