Beautiful Notification Plugin - jQuery Pnotify

Beautiful Notification Plugin - jQuery Pnotify
File Size: 194 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.