
Pnotify is a customizable, modular, poweful jQuery Notification Plugin that allows you to add beautiful and animated notification windows on your web app.
How to use it:
1. Include the jQuery Pnotify plugin's core JavaScript and Stylesheet on the page.
<link href="pnotify.css" rel="stylesheet"> <link href="pnotify.brighttheme.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <script src="pnotify.js"></script>
2. Include a module of your choice on the page.
- Animate: Animates notifications using Animate.css
- Buttons: Custom buttons
- Callback: Callback functions
- Confirm: Confirmation dialog
- Desktop: Displays the notification even when the web page is not visible
- History: Redisplays old notifications
- Mobile: Optmizes the notifications on mobile & tablet
- Nonblock: Creates non-blocking notifications
<!-- Animate module --> <script src="pnotify.animate.js"></script> <!-- Buttons module --> <link href="pnotify.buttons.css" rel="stylesheet"> <script src="pnotify.buttons.js"></script> <!-- Callback module --> <script src="pnotify.callbacks.js"></script> <!-- Confirm module --> <script src="pnotify.confirm.js"></script> <!-- Desktop module --> <script src="pnotify.desktop.js"></script> <!-- History module --> <link href="pnotify.history.css" rel="stylesheet"> <script src="pnotify.history.js"></script> <!-- Mobile module --> <link href="pnotify.mobile.css" rel="stylesheet"> <script src="pnotify.mobile.js"></script> <!-- Nonblock module --> <script src="pnotify.nonblock.js"></script>
3. Create a basic notification on the page.
$(function(){ new PNotify({ title: 'Notification Title', text: 'Notification Text' }); });
4. Create a basic notification on the page.
$(function(){ new PNotify({ // The notice's title. title: false, // Whether to escape the content of the title. (Not allow HTML.) title_escape: false, // The notice's text. text: false, // Whether to escape the content of the text. (Not allow HTML.) text_escape: false, // What styling classes to use. (Can be either "brighttheme", "bootstrap3", or "fontawesome".) styling: "brighttheme", // Additional classes to be added to the notice. (For custom styling.) addclass: "", // Class to be added to the notice for corner styling. cornerclass: "", // Display the notice when it is created. auto_display: true, // Width of the notice. width: "300px", // Minimum height of the notice. It will expand to fit content. min_height: "16px", // Type of the notice. "notice", "info", "success", or "error". type: "notice", // 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. icon: true, // The animation to use when displaying and hiding the notice. "none" // and "fade" are supported through CSS. Others are supported // through the Animate module and Animate.css. animation: "fade", // Speed at which the notice animates in and out. "slow", "normal", // or "fast". Respectively, 400ms, 250ms, 100ms. animate_speed: "normal", // Display a drop shadow. shadow: true, // After a delay, remove the notice. hide: true, // Delay in milliseconds before the notice is removed. delay: 8000, // Reset the hide timer if the mouse moves over the notice. mouse_reset: true, // Remove the notice's elements from the DOM after it is removed. remove: true, // Change new lines to br tags. insert_brs: true, // Whether to remove the notice from the global array when it is closed. destroy: true, // The stack on which the notices will be placed. Also controls the // direction the notices stack. stack: default_stack }); });
2018-12-11
This awesome jQuery plugin is developed by sciactive. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 11.12.2018
- Source