The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

Noty : A jQuery Notification Plugin

Plugin rate :

noty is a jQuery plugin that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue. (Optional)

The notifications can be positioned at the :
top - topLeft - topCenter - topRight - center - centerLeft - centerRight - bottom - bottomLeft - bottomCenter - bottomRight

There are lots of other options in the API to customise the text, animation, speed, buttons and much more.

It also has various callbacks for the buttons, opening closing the notifications and queue control.

Implementation: 

1. First, include CSS and jQuery files

1
2
3
4
5
6
7
8
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<script type="text/javascript" src="js/noty/layouts/topLeft.js"></script>
<script type="text/javascript" src="js/noty/layouts/topRight.js"></script>
 
<!-- You can add more layouts if you want -->
<script type="text/javascript" src="js/noty/themes/default.js"></script>

2. Call Noty plugin with or without options

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//SIMPLE NOTY CREATION
var noty = noty({text: 'noty - a jquery notification library!'});
 
//CUSTOM CONTAINER
var noty = $('.custom_container').noty({text: 'noty - a jquery notification library!'});
 
//CUSTOM THEME
//Noty is easily themable using Javascript or CSS. Theme structre is in noty/themes/default.js file. 
//You can copy-paste this file and change.
//After that you can set your new theme with noty theme property.
var noty_id = noty({
    text: 'noty - a jquery notification library!',
    theme: 'your_new_theme',
});
 
//BUTTONS
//We can set button objects with an array like above;
noty({
  text: 'Do you want to continue?', 
  buttons: [
    {addClass: 'btn btn-primary', text: 'Ok', onClick: function($noty) {
 
        // this = button element
        // $noty = $noty element
 
        $noty.close();
        noty({text: 'You clicked "Ok" button', type: 'success'});
      }
    },
    {addClass: 'btn btn-danger', text: 'Cancel', onClick: function($noty) {
        $noty.close();
        noty({text: 'You clicked "Cancel" button', type: 'error'});
      }
    }
  ]
});
Options: 
layout
String
Default : "top" - Noty position
theme
String
Default : "default" - Noty theme
type
String
Default : 'alert' - Noty type
text
String
Default : "" - Text to show on Noty box
dismissQueue
Boolean
Default : true - If you want to use queue feature set this true
template
String
Default : "" - '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>
animation
Array
open: {height: 'toggle'}, close: {height: 'toggle'}, easing: 'swing', speed: 500 // opening & closing animation speed
timeout
Boolean
Default : false - delay for closing event. Set false for sticky notifications
force
Boolean
Default : false - adds notification to the beginning of queue when set to true
closeWith
Array
Default : ['click'] - Can be set to : ['click', 'button', 'hover']
buttons
Boolean
Default : false - an array of buttons
Methods: 
callback
Function
callback: { onShow: function() {}, afterShow: function() {}, onClose: function() {}, afterClose: function() {} }
Screenshots
  • A success notification

  • An error notification

Comments

Love it!!!

NICE

Its not clear. Because we don't know where these jquery files include

Hi

Check out the live edit demo for the Noty.js plugin -

http://bitconfig.com/noty/bitconfig_noty.html

Cheers
-Patrick

Hi, can anyone tell me which file failed to load when success message alone works? Error is not popping up :(

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.7
jQuery U.I
>= 1.7
Current version
2.2
Browsers compatibility
Google ChromeIE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [5]