Versatile Notification Plugin jQuery notifyjs - Download Versatile Notification Plugin For jQuery - notifyjs

Download Versatile Notification Plugin For jQuery – notifyjs

Posted on

This time I will share jQuery Plugin and tutorial about Versatile Notification Plugin For jQuery – notifyjs, hope it will help you in programming stack.

Versatile Notification Plugin jQuery notifyjs - Download Versatile Notification Plugin For jQuery - notifyjs

File Size: 19.1 KB
Views Total: 642
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

notifyjs is a simple to use, highly customizable notification library for jQuery that lets you show notifications of various types to your end users. The notification can be placed anywhere on the webpage and even attached to any DOM elements just like the tooltip & popover.

More features:

  • auto hide after a timeout
  • show/hide animations
  • click to dismiss
  • easy to add your own styles

Basic usage:

1. Install the jQuery notifyjs plugin:

1 # NPM
2 $ npm install Notify.js
3  
4 # Bower
5 $ bower install Notify.js

2. Import the Notify.js to your project or include the notify.js directly:

1 <script src="dist/notify.js"></script>

3. Create a tooltip-style notification box attached to a specific element. Notification types included:

  • success
  • info
  • warn
  • error
1 $(".element").notify("Hello World", TYPE);

4. Create a global notification box displayed at the top right of the web page.

1 $.notify("Hello World", TYPE);

5. Change the default position of the notification box.

01 $.notify("Hello World",{
02  
03   /*
04     "top",
05     "middle",
06     "bottom",
07     "left",
08     "center",
09     "right"
10   */
11   position:"right"
12    
13 });

6. Customize the notification box with these options.

01 $.notify("Hello World",{
02  
03   // click to dismiss
04   clickToHide: true,
05  
06   // auto dismiss
07   autoHide: true,
08  
09   // auto dismiss after 5 seconds
10   autoHideDelay: 5000,
11  
12   // shows arrow
13   arrowShow: true,
14  
15   // arrow size
16   arrowSize: 5,
17  
18   // shows break new lines
19   breakNewLines: true,
20  
21   // position
22   elementPosition: "bottom",
23   globalPosition: "top right",
24  
25   // default style
26   style: "bootstrap",
27  
28   // default type
29   className: "error",
30  
31   // animation options
32   show<a href="https://www.jqueryscript.net/animation/">Animation</a>: "slideDown",
33   showDuration: 400,
34   hideAnimation: "slideUp",
35   hideDuration: 200,
36  
37   // space between notification boxes
38   gap: 5
39  
40 });

This awesome jQuery plugin is developed by jpillora. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net