macOS Growl Notification Plugin jnoty - Free Download macOS Like Growl Notification Plugin With jQuery - jnoty

Free Download macOS Like Growl Notification Plugin With jQuery – jnoty

By Posted on

This time I will share jQuery Plugin and tutorial about macOS Like Growl Notification Plugin With jQuery – jnoty, hope it will help you in programming stack.

macOS Growl Notification Plugin jnoty - Free Download macOS Like Growl Notification Plugin With jQuery - jnoty
File Size: 61.2 KB
Views Total: 4029
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

jnoty is a small jQuery notification plugin which helps you create macOS-like Growl Notifications with varying themes (Success, Warning, Info, Danger) on your web app.

More features:

  • Auto dismisses after a timeout, similar to the toaster.
  • Allows to set where the notification should append to.
  • CSS easing functions.
  • Custom icons: You can use any Iconic Font like Font Awesome.
  • Open/close animations.
  • Useful callback functions.

How to use it:

1. Include jQuery library and the jnoty plugin’s files on the html page.

view source
1 <script src="https://code.jquery.com/jquery-1.12.4.min.js"
2         integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
3         crossorigin="anonymous"></script>
4 <script src="jnoty.js"></script>
5 <link rel="stylesheet" href="jnoty.css">

2. Create a default notification that will auto dismiss after 3 seconds.

view source
1 $.jnoty("Notification Message Here");

3. Choose a theme for the growl notification.

view source
1 $.jnoty("Notification Message Here.", {
2  
3   // success, warning, info, danger
4   theme: 'success'
5    
6 });

4. To override the default timeout:

view source
1 $.jnoty("Notification Message Here.", {
2  
3   life: 3000 // 3 seconds
4  
5 });

5. If you want a ‘Sticky’ notification that always stays on the screen until you click the ‘x’ button.

view source
1 $.jnoty("Notification Message Here.", {
2  
3   sticky: true
4  
5 });

6. Add a custom icon to the notification.

view source
1 $.jnoty("Notification Message Here.", {
2  
3   icon: 'fa fa-check-circle' // font awesome icon
4  
5 });

7. Change the default position your notifications should appear.

view source
1 $.jnoty("Notification Message Here.", {
2  
3   position: 'top-right',
4  
5 });

8. All default config options.

view source
01 $.jnoty("Notification Message Here.", {
02  
03   pool:               0,
04   header:             '',
05   group:              '',
06   sticky:             false,
07   position:           'top-right',
08   appendTo:           'body',
09   glue:               'after',
10   theme:              'default',
11   themeState:         'highlight',
12   corners:            '10px',
13   check:              250,
14   life:               3000,
15   closeDuration:      'normal',
16   openDuration:       'normal',
17   easing:             'swing',
18   closer: false,
19   closeTemplate: '',
20   closerTemplate: '<div>[ close all ]</div>',
21   animateOpen:        {
22     opacity:        'show'
23   },
24   animateClose:       {
25     opacity:        'hide'
26   }
27  
28 });

9. Callback functions.

view source
01 $.jnoty("Notification Message Here.", {
02  
03   log:                function() {},
04   beforeOpen:         function() {},
05   afterOpen:          function() {},
06   open:               function() {},
07   beforeClose:        function() {},
08   close:              function() {},
09   click:              function() {},
10  
11 });

Changelog:

2019-12-06

  • Fixed text overflow issue with long strings

v1.2.0 (2018-11-30)

  • Add new theme and remove icon option

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

source : jquery.net

Related posts: