Skip to content
This repository
Browse code

I think this will be v2

  • Loading branch information...
commit a34932a6cbc0727096cd9aacc6cb5e1e565c8823 1 parent 989b24c
Nedim Arabacı authored

Showing 34 changed files with 2,076 additions and 464 deletions. Show diff stats Hide diff stats

  1. +2 0  .gitignore
  2. +14 8 README.markdown
  3. +91 0 demo/allLayouts.html
  4. +86 0 demo/allTypes.html
  5. +103 0 demo/api.html
  6. +0 31 demo/btnStylesViewer.html
  7. +0 24 demo/btnStylesViewer.js
  8. +0 30 demo/consumeAlert.html
  9. +0 32 demo/consumeAlert.js
  10. +78 0 demo/consumingAlert.html
  11. +90 0 demo/customContainer.html
  12. +45 6 demo/index.html
  13. +0 30 demo/stylesViewer.html
  14. +0 38 demo/stylesViewer.js
  15. +104 0 demo/usingWithButtons.html
  16. +98 0 demo/usingWithButtons2.html
  17. +87 0 demo/usingWithModal.html
  18. +110 0 demo/usingWithOldOptions.html
  19. +0 265 js/jquery.noty.js
  20. +481 0 js/noty/jquery.noty.js
  21. +34 0 js/noty/layouts/bottom.js
  22. +41 0 js/noty/layouts/bottomCenter.js
  23. +43 0 js/noty/layouts/bottomLeft.js
  24. +43 0 js/noty/layouts/bottomRight.js
  25. +56 0 js/noty/layouts/center.js
  26. +61 0 js/noty/layouts/centerLeft.js
  27. +61 0 js/noty/layouts/centerRight.js
  28. +31 0 js/noty/layouts/inline.js
  29. +34 0 js/noty/layouts/top.js
  30. +41 0 js/noty/layouts/topCenter.js
  31. +43 0 js/noty/layouts/topLeft.js
  32. +43 0 js/noty/layouts/topRight.js
  33. 0  js/{ → noty}/promise.js
  34. +156 0 js/noty/themes/default.js
2  .gitignore
... ... @@ -1 +1,3 @@
1 1 child/
  2 +
  3 +.DS_Store
22 README.markdown
Source Rendered
... ... @@ -1,16 +1,22 @@
1   -noty - jQuery Notification Plugin
2   -================================
  1 +# noty - A jQuery Notification Plugin
3 2
4   -Documentation and examples are here [http://needim.github.com/noty/](http://needim.github.com/noty/).
  3 +![noty v2](http://ned.im/noty-v2.png "noty v2")
5 4
6   -noty is a jQuery plugin that makes it easy to create **alert**, **success**, **error**, **information** and **confirmation** messages as an alternative the standard alert dialog. Each notification is added to a queue.
  5 +***
7 6
8   -The notifications can be positioned at the **top**, **topCenter** (like GMail), **bottom**, **centre**, **top left**, **top right**, **bottom left** or **top right**.
  7 +## Hi
9 8
10   -There are lots of other options in the API to customise the **text**, **animation**, **speed**, **buttons** and **much more**.
  9 +**noty** is a jQuery plugin that makes it easy to create **alert** - **success** - **error** - **warning** - **information** - b messages as an alternative the standard alert dialog. Each notification is added to a **queue**. (**Optional**)
  10 +
  11 +The notifications can be positioned at the;
  12 +**top** - **topLeft** - **topCenter** - **topRight** - **center** - **centerLeft** - **centerRight** - **bottom** - **bottomLeft** - **bottomCenter** - **bottomRight**
  13 +
  14 +There are lots of other options in the API to customise the text, animation, speed, buttons and much more.
11 15
12 16 It also has various callbacks for the buttons, opening closing the notifications and queue control.
13 17
14   -**new:** Theme support (**default**, **mitgux**, **twitter bootstrap**)
  18 +***
  19 +
  20 +### Documentation
15 21
16   -More information is here [http://needim.github.com/noty/](http://needim.github.com/noty/).
  22 +Documentation and examples are here: <http://needim.github.com/noty>
91 demo/allLayouts.html
... ... @@ -0,0 +1,91 @@
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 + <meta charset="utf-8">
  6 + <title>Notification Layouts</title>
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <meta name="description" content="demonstration of some noty capabilities">
  9 +
  10 + <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
  11 + <style type="text/css">
  12 +
  13 + html {
  14 + height: 100%;
  15 + width: 100%;
  16 + }
  17 + body {
  18 + font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
  19 + }
  20 +
  21 + </style>
  22 +
  23 + <link rel="stylesheet" type="text/css" href="buttons.css"/>
  24 +
  25 +</head>
  26 +<body>
  27 +
  28 + <div class="container">
  29 +
  30 + <div id="customContainer"></div>
  31 +
  32 + </div>
  33 +
  34 + <script src="jquery-1.7.2.min.js"></script>
  35 +
  36 + <!-- noty -->
  37 + <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
  38 +
  39 + <!-- layouts -->
  40 + <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
  41 + <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
  42 + <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
  43 + <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
  44 + <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
  45 + <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
  46 + <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
  47 + <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
  48 + <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
  49 + <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
  50 + <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
  51 + <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
  52 +
  53 + <!-- themes -->
  54 + <script type="text/javascript" src="../js/noty/themes/default.js"></script>
  55 +
  56 + <script type="text/javascript">
  57 +
  58 + function generate(layout) {
  59 + var n = noty({
  60 + text: layout,
  61 + type: 'alert',
  62 + dismissQueue: true,
  63 + layout: layout,
  64 + theme: 'default'
  65 + });
  66 + console.log('html: '+n.options.id);
  67 + }
  68 +
  69 + function generateAll() {
  70 + generate('top');
  71 + generate('topCenter');
  72 + generate('topLeft');
  73 + generate('topRight');
  74 + generate('center');
  75 + generate('centerLeft');
  76 + generate('centerRight');
  77 + generate('bottom');
  78 + generate('bottomCenter');
  79 + generate('bottomLeft');
  80 + generate('bottomRight');
  81 + }
  82 +
  83 + $(document).ready(function() {
  84 +
  85 + generateAll();
  86 +
  87 + });
  88 +
  89 + </script>
  90 +</body>
  91 +</html>
86 demo/allTypes.html
... ... @@ -0,0 +1,86 @@
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 + <meta charset="utf-8">
  6 + <title>Notification Types</title>
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <meta name="description" content="demonstration of some noty capabilities">
  9 +
  10 + <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
  11 + <style type="text/css">
  12 +
  13 + html {
  14 + height: 100%;
  15 + width: 100%;
  16 + }
  17 + body {
  18 + font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
  19 + }
  20 +
  21 + </style>
  22 +
  23 + <link rel="stylesheet" type="text/css" href="buttons.css"/>
  24 +
  25 +</head>
  26 +<body>
  27 +
  28 + <div class="container">
  29 +
  30 + <div id="customContainer"></div>
  31 +
  32 + </div>
  33 +
  34 + <script src="jquery-1.7.2.min.js"></script>
  35 +
  36 + <!-- noty -->
  37 + <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
  38 +
  39 + <!-- layouts -->
  40 + <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
  41 + <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
  42 + <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
  43 + <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
  44 + <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
  45 + <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
  46 + <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
  47 + <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
  48 + <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
  49 + <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
  50 + <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
  51 + <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
  52 +
  53 + <!-- themes -->
  54 + <script type="text/javascript" src="../js/noty/themes/default.js"></script>
  55 +
  56 + <script type="text/javascript">
  57 +
  58 + function generate(type) {
  59 + var n = noty({
  60 + text: type,
  61 + type: type,
  62 + dismissQueue: true,
  63 + layout: 'topCenter',
  64 + theme: 'default'
  65 + });
  66 + console.log('html: '+n.options.id);
  67 + }
  68 +
  69 + function generateAll() {
  70 + generate('alert');
  71 + generate('information');
  72 + generate('error');
  73 + generate('warning');
  74 + generate('notification');
  75 + generate('success');
  76 + }
  77 +
  78 + $(document).ready(function() {
  79 +
  80 + generateAll();
  81 +
  82 + });
  83 +
  84 + </script>
  85 +</body>
  86 +</html>
103 demo/api.html
... ... @@ -0,0 +1,103 @@
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 + <meta charset="utf-8">
  6 + <title>API</title>
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <meta name="description" content="demonstration of some noty capabilities">
  9 +
  10 + <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
  11 + <style type="text/css">
  12 +
  13 + html {
  14 + height: 100%;
  15 + width: 100%;
  16 + }
  17 + body {
  18 + font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
  19 + }
  20 +
  21 + </style>
  22 +
  23 + <link rel="stylesheet" type="text/css" href="buttons.css"/>
  24 +
  25 +</head>
  26 +<body>
  27 +
  28 + <div class="container">
  29 +
  30 + <div id="customContainer"></div>
  31 +
  32 + </div>
  33 +
  34 + <script src="jquery-1.7.2.min.js"></script>
  35 +
  36 + <!-- noty -->
  37 + <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
  38 +
  39 + <!-- layouts -->
  40 + <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
  41 + <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
  42 + <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
  43 + <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
  44 + <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
  45 + <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
  46 + <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
  47 + <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
  48 + <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
  49 + <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
  50 + <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
  51 + <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
  52 +
  53 + <!-- themes -->
  54 + <script type="text/javascript" src="../js/noty/themes/default.js"></script>
  55 +
  56 + <script type="text/javascript">
  57 +
  58 + function generate(type) {
  59 + var n = noty({
  60 + text: type,
  61 + type: type,
  62 + dismissQueue: false,
  63 + layout: 'topCenter',
  64 + theme: 'default'
  65 + });
  66 + console.log(type + ' - ' + n.options.id);
  67 + return n;
  68 + }
  69 +
  70 + $(document).ready(function() {
  71 +
  72 + var alert = generate('alert');
  73 + var information = generate('information');
  74 + var error = generate('error');
  75 + var warning = generate('warning');
  76 + var notification = generate('notification');
  77 + var success = generate('success');
  78 +
  79 + setTimeout(function() {
  80 + $.noty.setText(alert.options.id, 'I\'m closing now!'); // same as alert.setText('Text Override')
  81 + }, 1000);
  82 +
  83 + setTimeout(function() {
  84 + $.noty.close(alert.options.id);
  85 + }, 3000);
  86 +
  87 + setTimeout(function() {
  88 + $.noty.setType(information.options.id, 'warning'); // same as information.setType('warning')
  89 + }, 5000);
  90 +
  91 + setTimeout(function() {
  92 + $.noty.setText(information.options.id, 'I\'m closing too. Goodbye!'); // same as information.setType('warning')
  93 + }, 7000);
  94 +
  95 + setTimeout(function() {
  96 + $.noty.closeAll();
  97 + }, 10000);
  98 +
  99 + });
  100 +
  101 + </script>
  102 +</body>
  103 +</html>
31 demo/btnStylesViewer.html
... ... @@ -1,31 +0,0 @@
1   -<!DOCTYPE html>
2   -<html lang="fr">
3   -<head>
4   - <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5   - <meta charset="utf-8">
6   - <title>Noty demo</title>
7   - <meta name="viewport" content="width=device-width, initial-scale=1.0">
8   - <meta name="description" content="demonstration of some noty capabilities">
9   - <meta name="author" content="Loïc Knuchel - @loicknuchel">
10   -
11   - <link rel="stylesheet" type="text/css" href="../css/jquery.noty.css"/>
12   - <link rel="stylesheet" type="text/css" href="../css/noty_theme_default.css"/>
13   - <link rel="stylesheet" type="text/css" href="../css/noty_theme_twitter.css"/>
14   - <link rel="stylesheet" type="text/css" href="../css/noty_theme_mitgux.css"/>
15   - <link rel="stylesheet" type="text/css" href="../css/noty_theme_facebook.css"/>
16   - <link rel="stylesheet" type="text/css" href="../css/noty_theme_growl.css"/>
17   - <link rel="stylesheet" type="text/css" href="buttons.css"/>
18   -</head>
19   -<body>
20   - <div class="container">
21   -
22   - </div>
23   -
24   -
25   - <script src="jquery-1.7.2.min.js"></script>
26   - <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
27   - <script>window.jQuery || document.write('<script src="jquery-1.7.2.min.js"><\/script>')</script>-->
28   - <script type="text/javascript" src="../js/jquery.noty.js"></script>
29   - <script type="text/javascript" src="btnStylesViewer.js"></script>
30   -</body>
31   -</html>
24 demo/btnStylesViewer.js
... ... @@ -1,24 +0,0 @@
1   -$(document).ready(function(){
2   - notyAlertWithButtons('topLeft', 'noty_theme_default');
3   - notyAlertWithButtons('topLeft', 'noty_theme_twitter');
4   - notyAlertWithButtons('topRight', 'noty_theme_mitgux');
5   - notyAlertWithButtons('bottomLeft', 'noty_theme_facebook');
6   - notyAlertWithButtons('bottomRight', 'noty_theme_growl');
7   -});
8   -
9   -function notyAlertWithButtons(layout, theme){
10   - noty({layout : layout, theme : theme, type : 'notification', text: 'alert with buttons',
11   - buttons: [
12   - {type: 'btn btn-primary', text: 'Ok', click: function($noty) {
13   - $noty.close();
14   - noty({force: true, layout : layout, theme : theme, text: 'You clicked "Ok" button', type: 'success'});
15   - }
16   - },
17   - {type: 'btn btn-danger', text: 'Cancel', click: function($noty) {
18   - $noty.close();
19   - noty({force: true, layout : layout, theme : theme, text: 'You clicked "Cancel" button', type: 'error'});
20   - }
21   - }
22   - ], closable: false, timeout: false
23   - });
24   -}
30 demo/consumeAlert.html
... ... @@ -1,30 +0,0 @@
1   -<!DOCTYPE html>
2   -<html lang="fr">
3   -<head>
4   - <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5   - <meta charset="utf-8">
6   - <title>Noty demo</title>
7   - <meta name="viewport" content="width=device-width, initial-scale=1.0">
8   - <meta name="description" content="demonstration of some noty capabilities">
9   - <meta name="author" content="Loïc Knuchel - @loicknuchel">
10   -
11   - <link rel="stylesheet" type="text/css" href="../css/jquery.noty.css"/>
12   - <link rel="stylesheet" type="text/css" href="../css/noty_theme_default.css"/>
13   - <link rel="stylesheet" type="text/css" href="../css/noty_theme_twitter.css"/>
14   - <link rel="stylesheet" type="text/css" href="../css/noty_theme_mitgux.css"/>
15   - <link rel="stylesheet" type="text/css" href="../css/noty_theme_facebook.css"/>
16   - <link rel="stylesheet" type="text/css" href="../css/noty_theme_growl.css"/>
17   -</head>
18   -<body>
19   - <div class="container">
20   -
21   - </div>
22   -
23   -
24   - <script src="jquery-1.7.2.min.js"></script>
25   - <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
26   - <script>window.jQuery || document.write('<script src="jquery-1.7.2.min.js"><\/script>')</script>-->
27   - <script type="text/javascript" src="../js/jquery.noty.js"></script>
28   - <script type="text/javascript" src="consumeAlert.js"></script>
29   -</body>
30   -</html>
32 demo/consumeAlert.js
... ... @@ -1,32 +0,0 @@
1   -$(document).ready(function(){
2   - /*var alertOld = window.alert;
3   - var wait = false;
4   -
5   - window.alert = function(text){
6   - noty({layout : 'topRight', theme : 'noty_theme_default', type : 'success', text: text, timeout : 1000,
7   - onShow :function(){
8   - console.log(new Date().getTime()+" : start show alert");
9   - },onShown :function(){
10   - console.log(new Date().getTime()+" : end show alert");
11   - },onClose :function(){
12   - console.log(new Date().getTime()+" : start hide alert");
13   - },onClosed :function(){
14   - console.log(new Date().getTime()+" : end hide alert");
15   - }
16   - });
17   - };
18   -
19   - console.log("before call");
20   - alert("bonjour");
21   - console.log("after call");*/
22   -
23   -
24   - alert("bonjour 1");
25   - $.noty.consumeAlert({layout : 'topRight', type : 'success'});
26   - alert("bonjour 2");
27   - $.noty.consumeAlert({layout : 'top', type : 'alert'});
28   - alert("bonjour 3");
29   - $.noty.stopConsumeAlert();
30   - alert("bonjour 4");
31   -
32   -});
78 demo/consumingAlert.html
... ... @@ -0,0 +1,78 @@
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 + <meta charset="utf-8">
  6 + <title>Notification Types</title>
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <meta name="description" content="demonstration of some noty capabilities">
  9 +
  10 + <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
  11 + <style type="text/css">
  12 +
  13 + html {
  14 + height: 100%;
  15 + width: 100%;
  16 + }
  17 + body {
  18 + font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
  19 + }
  20 +
  21 + </style>
  22 +
  23 + <link rel="stylesheet" type="text/css" href="buttons.css"/>
  24 +
  25 +</head>
  26 +<body>
  27 +
  28 + <div class="container">
  29 +
  30 + <div id="customContainer"></div>
  31 +
  32 + </div>
  33 +
  34 + <script src="jquery-1.7.2.min.js"></script>
  35 +
  36 + <!-- noty -->
  37 + <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
  38 +
  39 + <!-- layouts -->
  40 + <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
  41 + <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
  42 + <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
  43 + <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
  44 + <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
  45 + <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
  46 + <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
  47 + <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
  48 + <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
  49 + <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
  50 + <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
  51 + <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
  52 +
  53 + <!-- themes -->
  54 + <script type="text/javascript" src="../js/noty/themes/default.js"></script>
  55 +
  56 + <script type="text/javascript">
  57 +
  58 + $(document).ready(function() {
  59 +
  60 + alert("This is a basic window alert");
  61 +
  62 + $.noty.consumeAlert({layout: 'topRight', type: 'success', dismissQueue: true});
  63 +
  64 + alert("This is the same but noty consumed with options");
  65 +
  66 + $.noty.consumeAlert({layout: 'topCenter', type: 'alert', dismissQueue: true});
  67 +
  68 + alert("Consumed again but different options");
  69 +
  70 + $.noty.stopConsumeAlert();
  71 +
  72 + alert("This is just alert without consume");
  73 +
  74 + });
  75 +
  76 + </script>
  77 +</body>
  78 +</html>
90 demo/customContainer.html
... ... @@ -0,0 +1,90 @@
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 + <meta charset="utf-8">
  6 + <title>Notification Types</title>
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <meta name="description" content="demonstration of some noty capabilities">
  9 +
  10 + <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
  11 + <style type="text/css">
  12 +
  13 + html {
  14 + height: 100%;
  15 + width: 100%;
  16 + }
  17 + body {
  18 + font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
  19 + }
  20 +
  21 + </style>
  22 +
  23 + <link rel="stylesheet" type="text/css" href="buttons.css"/>
  24 +
  25 +</head>
  26 +<body>
  27 +
  28 + <div class="container">
  29 +
  30 + <div id="customContainer" style="width: 400px; margin-left: 125px; margin-top: 100px; border: 1px solid #ccc; padding: 10px">
  31 + <p><strong>Hi!</strong> I'm a custom container</p>
  32 + </div>
  33 +
  34 + </div>
  35 +
  36 + <script src="jquery-1.7.2.min.js"></script>
  37 +
  38 + <!-- noty -->
  39 + <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
  40 +
  41 + <!-- layouts -->
  42 + <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
  43 + <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
  44 + <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
  45 + <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
  46 + <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
  47 + <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
  48 + <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
  49 + <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
  50 + <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
  51 + <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
  52 + <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
  53 + <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
  54 +
  55 + <!-- themes -->
  56 + <script type="text/javascript" src="../js/noty/themes/default.js"></script>
  57 +
  58 + <script type="text/javascript">
  59 +
  60 + function generate(type) {
  61 +
  62 + var n = $('div#customContainer').noty({
  63 + text: type,
  64 + type: type,
  65 + dismissQueue: true,
  66 + layout: 'topCenter',
  67 + theme: 'default'
  68 + });
  69 +
  70 + // console.log('html: '+n.options.id);
  71 + }
  72 +
  73 + function generateAll() {
  74 + generate('alert');
  75 + generate('information');
  76 + generate('error');
  77 + generate('warning');
  78 + generate('notification');
  79 + generate('success');
  80 + }
  81 +
  82 + $(document).ready(function() {
  83 +
  84 + generateAll();
  85 +
  86 + });
  87 +
  88 + </script>
  89 +</body>
  90 +</html>
51 demo/index.html
... ... @@ -1,23 +1,62 @@
1 1 <!DOCTYPE html>
2   -<html lang="fr">
  2 +<html lang="en">
3 3 <head>
4 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 5 <meta charset="utf-8">
6   - <title>Noty demo</title>
  6 + <title>Demonstration of noty</title>
7 7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 8 <meta name="description" content="demonstration of some noty capabilities">
9   - <meta name="author" content="Loïc Knuchel - @loicknuchel">
  9 +
  10 + <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
  11 + <style type="text/css">
  12 +
  13 + html {
  14 + height: 100%;
  15 + width: 100%;
  16 + }
  17 + body {
  18 + font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
  19 + }
  20 +
  21 + a {
  22 + color: #444;
  23 + line-height: 30px;
  24 + text-decoration: none;
  25 + background: #f1f1f1;
  26 + padding: 2px 8px;
  27 + }
  28 +
  29 + </style>
  30 +
10 31 </head>
11 32 <body>
12 33 <div class="container">
13 34 <div>
14   - <a href="stylesViewer.html">See noty styles</a>
  35 + <a href="allLayouts.html">See All Layouts</a>
15 36 </div>
16 37 <div>
17   - <a href="btnStylesViewer.html">See noty btn styles</a>
  38 + <a href="allTypes.html">See All Types</a>
18 39 </div>
19 40 <div>
20   - <a href="consumeAlert.html">Noty consume alert()</a>
  41 + <a href="usingWithButtons.html">Using with Buttons</a>
  42 + </div>
  43 + <div>
  44 + <a href="usingWithButtons2.html">Using with Buttons 2</a>
  45 + </div>
  46 + <div>
  47 + <a href="usingWithModal.html">Using with Modal</a>
  48 + </div>
  49 + <div>
  50 + <a href="usingWithOldOptions.html">Using with Old Options</a>
  51 + </div>
  52 + <div>
  53 + <a href="customContainer.html">Using with Custom Container</a>
  54 + </div>
  55 + <div>
  56 + <a href="consumingAlert.html">Consuming Alert</a>
  57 + </div>
  58 + <div>
  59 + <a href="api.html">Using API</a>
21 60 </div>
22 61 </div>
23 62 </body>
30 demo/stylesViewer.html
... ... @@ -1,30 +0,0 @@
1   -<!DOCTYPE html>
2   -<html lang="fr">
3   -<head>
4   - <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5   - <meta charset="utf-8">
6   - <title>Noty demo</title>
7   - <meta name="viewport" content="width=device-width, initial-scale=1.0">
8   - <meta name="description" content="demonstration of some noty capabilities">
9   - <meta name="author" content="Loïc Knuchel - @loicknuchel">
10   -
11   - <link rel="stylesheet" type="text/css" href="../css/jquery.noty.css"/>
12   - <link rel="stylesheet" type="text/css" href="../css/noty_theme_default.css"/>
13   - <link rel="stylesheet" type="text/css" href="../css/noty_theme_twitter.css"/>
14   - <link rel="stylesheet" type="text/css" href="../css/noty_theme_mitgux.css"/>
15   - <link rel="stylesheet" type="text/css" href="../css/noty_theme_facebook.css"/>
16   - <link rel="stylesheet" type="text/css" href="../css/noty_theme_growl.css"/>
17   -</head>
18   -<body>
19   - <div class="container">
20   -
21   - </div>
22   -
23   -
24   - <script src="jquery-1.7.2.min.js"></script>
25   - <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
26   - <script>window.jQuery || document.write('<script src="jquery-1.7.2.min.js"><\/script>')</script>-->
27   - <script type="text/javascript" src="../js/jquery.noty.js"></script>
28   - <script type="text/javascript" src="stylesViewer.js"></script>
29   -</body>
30   -</html>
38 demo/stylesViewer.js
... ... @@ -1,38 +0,0 @@
1   -$(document).ready(function(){
2   - //alert('toto');
3   - /**/noty({layout : 'topLeft', theme : 'noty_theme_default', type : 'notification', text: 'notification with default theme', timeout : false });
4   - noty({layout : 'topLeft', theme : 'noty_theme_default', type : 'warning', text: 'warning with default theme', timeout : false });
5   - noty({layout : 'topLeft', theme : 'noty_theme_default', type : 'alert', text: 'alert with default theme', timeout : false });
6   - noty({layout : 'topLeft', theme : 'noty_theme_default', type : 'information', text: 'information with default theme', timeout : false });
7   - noty({layout : 'topLeft', theme : 'noty_theme_default', type : 'success', text: 'success with default theme', timeout : false });
8   - noty({layout : 'topLeft', theme : 'noty_theme_default', type : 'error', text: 'error with default theme', timeout : false });
9   -
10   - noty({layout : 'topLeft', theme : 'noty_theme_twitter', type : 'notification', text: 'notification with twitter theme', timeout : false });
11   - noty({layout : 'topLeft', theme : 'noty_theme_twitter', type : 'warning', text: 'warning with twitter theme', timeout : false });
12   - noty({layout : 'topLeft', theme : 'noty_theme_twitter', type : 'alert', text: 'alert with twitter theme', timeout : false });
13   - noty({layout : 'topLeft', theme : 'noty_theme_twitter', type : 'information', text: 'information with twitter theme', timeout : false });
14   - noty({layout : 'topLeft', theme : 'noty_theme_twitter', type : 'success', text: 'success with twitter theme', timeout : false });
15   - noty({layout : 'topLeft', theme : 'noty_theme_twitter', type : 'error', text: 'error with twitter theme', timeout : false });
16   -
17   - noty({layout : 'topRight', theme : 'noty_theme_mitgux', type : 'notification', text: 'notification with mitgux theme', timeout : false });
18   - noty({layout : 'topRight', theme : 'noty_theme_mitgux', type : 'warning', text: 'warning with mitgux theme', timeout : false });
19   - noty({layout : 'topRight', theme : 'noty_theme_mitgux', type : 'alert', text: 'alert with mitgux theme', timeout : false });
20   - noty({layout : 'topRight', theme : 'noty_theme_mitgux', type : 'information', text: 'information with mitgux theme', timeout : false });
21   - noty({layout : 'topRight', theme : 'noty_theme_mitgux', type : 'success', text: 'success with mitgux theme', timeout : false });
22   - noty({layout : 'topRight', theme : 'noty_theme_mitgux', type : 'error', text: 'error with mitgux theme', timeout : false });
23   -
24   - noty({layout : 'bottomLeft', theme : 'noty_theme_facebook', type : 'notification', text: 'notification with facebook theme', timeout : false });
25   - noty({layout : 'bottomLeft', theme : 'noty_theme_facebook', type : 'warning', text: 'warning with facebook theme', timeout : false });
26   - noty({layout : 'bottomLeft', theme : 'noty_theme_facebook', type : 'alert', text: 'alert with facebook theme', timeout : false });
27   - noty({layout : 'bottomLeft', theme : 'noty_theme_facebook', type : 'information', text: 'information with facebook theme', timeout : false });
28   - noty({layout : 'bottomLeft', theme : 'noty_theme_facebook', type : 'success', text: 'success with facebook theme', timeout : false });
29   - noty({layout : 'bottomLeft', theme : 'noty_theme_facebook', type : 'error', text: 'error with facebook theme', timeout : false });
30   -
31   - var content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.';
32   - var title = '<div class="header">This is a sticky notice!</div>';
33   - var icon = '<div class="icon"><img src="http://s3.amazonaws.com/twitter_production/profile_images/132499022/myface_bigger.jpg"></div>';
34   -
35   - noty({layout : 'bottomRight', theme : 'noty_theme_growl', type : 'error', text: content, closeButton : true, timeout : false });
36   - noty({layout : 'bottomRight', theme : 'noty_theme_growl', type : 'error', text: title+content, timeout : false });
37   - noty({layout : 'bottomRight', theme : 'noty_theme_growl', type : 'error', text: icon+'<div style="margin-left: 58px;">'+title+content+'</div>', timeout : false });
38   -});
104 demo/usingWithButtons.html
... ... @@ -0,0 +1,104 @@
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 + <meta charset="utf-8">
  6 + <title>Using with Buttons</title>
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <meta name="description" content="demonstration of some noty capabilities">
  9 +
  10 + <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
  11 + <style type="text/css">
  12 +
  13 + html {
  14 + height: 100%;
  15 + width: 100%;
  16 + }
  17 + body {
  18 + font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
  19 + }
  20 +
  21 + </style>
  22 +
  23 + <link rel="stylesheet" type="text/css" href="buttons.css"/>
  24 +
  25 +</head>
  26 +<body>
  27 +
  28 + <div class="container">
  29 +
  30 + <div id="customContainer"></div>
  31 +
  32 + </div>
  33 +
  34 + <script src="jquery-1.7.2.min.js"></script>
  35 +
  36 + <!-- noty -->
  37 + <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
  38 +
  39 + <!-- layouts -->
  40 + <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
  41 + <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
  42 + <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
  43 + <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
  44 + <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
  45 + <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
  46 + <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
  47 + <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
  48 + <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
  49 + <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
  50 + <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
  51 + <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
  52 +
  53 + <!-- themes -->
  54 + <script type="text/javascript" src="../js/noty/themes/default.js"></script>
  55 +
  56 + <script type="text/javascript">
  57 +
  58 + function generate(layout) {
  59 + var n = noty({
  60 + text: 'Do you want to continue?',
  61 + type: 'alert',
  62 + dismissQueue: true,
  63 + layout: layout,
  64 + theme: 'default',
  65 + buttons: [
  66 + {addClass: 'btn btn-primary', text: 'Ok', onClick: function($noty) {
  67 + $noty.close();
  68 + noty({dismissQueue: true, force: true, layout: layout, theme: 'default', text: 'You clicked "Ok" button', type: 'success'});
  69 + }
  70 + },
  71 + {addClass: 'btn btn-danger', text: 'Cancel', onClick: function($noty) {
  72 + $noty.close();
  73 + noty({dismissQueue: true, force: true, layout: layout, theme: 'default', text: 'You clicked "Cancel" button', type: 'error'});
  74 + }
  75 + }
  76 + ]
  77 + });
  78 + console.log('html: '+n.options.id);
  79 + }
  80 +
  81 + function generateAll() {
  82 + generate('top');
  83 + generate('topCenter');
  84 + generate('topLeft');
  85 + generate('topRight');
  86 + generate('center');
  87 + generate('centerLeft');
  88 + generate('centerRight');
  89 + generate('bottom');
  90 + generate('bottomCenter');
  91 + generate('bottomLeft');
  92 + generate('bottomRight');
  93 +
  94 + }
  95 +
  96 + $(document).ready(function() {
  97 +
  98 + generateAll();
  99 +
  100 + });
  101 +
  102 + </script>
  103 +</body>
  104 +</html>
98 demo/usingWithButtons2.html
... ... @@ -0,0 +1,98 @@
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 + <meta charset="utf-8">
  6 + <title>Notification Types</title>
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <meta name="description" content="demonstration of some noty capabilities">
  9 +
  10 + <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
  11 + <style type="text/css">
  12 +
  13 + html {
  14 + height: 100%;
  15 + width: 100%;
  16 + }
  17 + body {
  18 + font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
  19 + }
  20 +
  21 + </style>
  22 +
  23 + <link rel="stylesheet" type="text/css" href="buttons.css"/>
  24 +
  25 +</head>
  26 +<body>
  27 +
  28 + <div class="container">
  29 +
  30 + <div id="customContainer"></div>
  31 +
  32 + </div>
  33 +
  34 + <script src="jquery-1.7.2.min.js"></script>
  35 +
  36 + <!-- noty -->
  37 + <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
  38 +
  39 + <!-- layouts -->
  40 + <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
  41 + <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
  42 + <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
  43 + <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
  44 + <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
  45 + <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
  46 + <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
  47 + <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
  48 + <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
  49 + <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
  50 + <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
  51 + <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
  52 +
  53 + <!-- themes -->
  54 + <script type="text/javascript" src="../js/noty/themes/default.js"></script>
  55 +
  56 + <script type="text/javascript">
  57 +
  58 + function generate(type, layout) {
  59 + var n = noty({
  60 + text: type,
  61 + type: type,
  62 + dismissQueue: true,
  63 + layout: layout,
  64 + theme: 'default',
  65 + buttons: [
  66 + {addClass: 'btn btn-primary', text: 'Ok', onClick: function($noty) {
  67 + $noty.close();
  68 + noty({dismissQueue: true, force: true, layout: layout, theme: 'default', text: 'You clicked "Ok" button', type: 'success'});
  69 + }
  70 + },
  71 + {addClass: 'btn btn-danger', text: 'Cancel', onClick: function($noty) {
  72 + $noty.close();
  73 + noty({dismissQueue: true, force: true, layout: layout, theme: 'default', text: 'You clicked "Cancel" button', type: 'error'});
  74 + }
  75 + }
  76 + ]
  77 + });
  78 + console.log('html: '+n.options.id);
  79 + }
  80 +
  81 + function generateAll() {
  82 + generate('alert', 'topCenter');
  83 + generate('information', 'topLeft');
  84 + generate('error', 'topRight');
  85 + generate('warning', 'center');
  86 + generate('notification', 'centerRight');
  87 + generate('success', 'centerLeft');
  88 + }
  89 +
  90 + $(document).ready(function() {
  91 +
  92 + generateAll();
  93 +
  94 + });
  95 +
  96 + </script>
  97 +</body>
  98 +</html>
87 demo/usingWithModal.html
... ... @@ -0,0 +1,87 @@
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 + <meta charset="utf-8">
  6 + <title>Notification Types</title>
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <meta name="description" content="demonstration of some noty capabilities">
  9 +
  10 + <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
  11 + <style type="text/css">
  12 +
  13 + html {
  14 + height: 100%;
  15 + width: 100%;
  16 + }
  17 + body {
  18 + font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
  19 + }
  20 +
  21 + </style>
  22 +
  23 + <link rel="stylesheet" type="text/css" href="buttons.css"/>
  24 +
  25 +</head>
  26 +<body>
  27 +
  28 + <div class="container">
  29 +
  30 + <div id="customContainer"></div>
  31 +
  32 + </div>
  33 +
  34 + <script src="jquery-1.7.2.min.js"></script>
  35 +
  36 + <!-- noty -->
  37 + <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
  38 +
  39 + <!-- layouts -->
  40 + <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
  41 + <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
  42 + <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
  43 + <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
  44 + <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
  45 + <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
  46 + <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
  47 + <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
  48 + <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
  49 + <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
  50 + <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
  51 + <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
  52 +
  53 + <!-- themes -->
  54 + <script type="text/javascript" src="../js/noty/themes/default.js"></script>
  55 +
  56 + <script type="text/javascript">
  57 +
  58 + function generate(type) {
  59 + var n = noty({
  60 + text: type,
  61 + type: type,
  62 + dismissQueue: true,
  63 + modal: true,
  64 + layout: 'topCenter',
  65 + theme: 'default'
  66 + });
  67 + console.log('html: '+n.options.id);
  68 + }
  69 +
  70 + function generateAll() {
  71 + generate('alert');
  72 + generate('information');
  73 + generate('error');
  74 + generate('warning');
  75 + generate('notification');
  76 + generate('success');
  77 + }
  78 +
  79 + $(document).ready(function() {
  80 +
  81 + generateAll();
  82 +
  83 + });
  84 +
  85 + </script>
  86 +</body>
  87 +</html>
110 demo/usingWithOldOptions.html
... ... @@ -0,0 +1,110 @@
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 + <meta charset="utf-8">
  6 + <title>Using noty v2 with Old Options</title>
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <meta name="description" content="demonstration of some noty capabilities">
  9 +
  10 + <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic&amp;subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
  11 + <style type="text/css">
  12 +
  13 + html {
  14 + height: 100%;
  15 + width: 100%;
  16 + }
  17 + body {
  18 + font-family: 'PT Sans', Tahoma, Arial, serif; line-height: 13px
  19 + }
  20 +
  21 + </style>
  22 +
  23 + <link rel="stylesheet" type="text/css" href="buttons.css"/>
  24 +
  25 +</head>
  26 +<body>
  27 +
  28 + <div class="container">
  29 +
  30 + <div id="customContainer"></div>
  31 +
  32 + </div>
  33 +
  34 + <script src="jquery-1.7.2.min.js"></script>
  35 +
  36 + <!-- noty -->
  37 + <script type="text/javascript" src="../js/noty/jquery.noty.js"></script>
  38 +
  39 + <!-- layouts -->
  40 + <script type="text/javascript" src="../js/noty/layouts/bottom.js"></script>
  41 + <script type="text/javascript" src="../js/noty/layouts/bottomCenter.js"></script>
  42 + <script type="text/javascript" src="../js/noty/layouts/bottomLeft.js"></script>
  43 + <script type="text/javascript" src="../js/noty/layouts/bottomRight.js"></script>
  44 + <script type="text/javascript" src="../js/noty/layouts/center.js"></script>
  45 + <script type="text/javascript" src="../js/noty/layouts/centerLeft.js"></script>
  46 + <script type="text/javascript" src="../js/noty/layouts/centerRight.js"></script>
  47 + <script type="text/javascript" src="../js/noty/layouts/inline.js"></script>
  48 + <script type="text/javascript" src="../js/noty/layouts/top.js"></script>
  49 + <script type="text/javascript" src="../js/noty/layouts/topCenter.js"></script>
  50 + <script type="text/javascript" src="../js/noty/layouts/topLeft.js"></script>
  51 + <script type="text/javascript" src="../js/noty/layouts/topRight.js"></script>
  52 +
  53 + <!-- themes -->
  54 + <script type="text/javascript" src="../js/noty/themes/default.js"></script>
  55 +
  56 + <script type="text/javascript">
  57 +
  58 + $(document).ready(function() {
  59 +
  60 + $.noty.returns = 'id'; // BC for old api
  61 +
  62 + var n = noty({
  63 + layout: 'topLeft',
  64 + theme: 'noty_theme_default',
  65 + animateOpen: {height: 'toggle'},
  66 + animateClose: {height: 'toggle'},
  67 + easing: 'swing',
  68 + text: 'Test with old options',
  69 + type: 'alert',
  70 + speed: 500,
  71 + timeout: 5000,
  72 + closeButton: false,
  73 + closeOnSelfClick: true,
  74 + closeOnSelfOver: false,
  75 + force: false,
  76 + onShow: false,
  77 + onShown: false,
  78 + onClose: false,
  79 + onClosed: false,
  80 + buttons: [
  81 + {type: 'btn btn-primary', text: 'Ok', click: function($noty) {
  82 +
  83 + // this = button element
  84 + // $noty = $noty element
  85 +
  86 + $noty.close();
  87 + noty({force: true, text: 'You clicked "Ok" button', type: 'success', layout: 'topLeft'});
  88 + }
  89 + },
  90 + {type: 'btn btn-danger', text: 'Cancel', click: function($noty) {
  91 + $noty.close();
  92 + noty({force: true, text: 'You clicked "Cancel" button', type: 'error', layout: 'topLeft'});
  93 + }
  94 + }
  95 + ],
  96 + modal: false,
  97 + template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
  98 + cssPrefix: 'noty_',
  99 + custom: {
  100 + container: null
  101 + }
  102 + });
  103 +
  104 + console.log('html: '+n);
  105 +
  106 + });
  107 +
  108 + </script>
  109 +</body>
  110 +</html>
265 js/jquery.noty.js
... ... @@ -1,265 +0,0 @@
1   -/**
2   -* noty - jQuery Notification Plugin v1.2.1
3   -* Contributors: https://github.com/needim/noty/graphs/contributors
4   -*
5   -* Examples and Documentation - http://needim.github.com/noty/
6   -*
7   -* Licensed under the MIT licenses:
8   -* http://www.opensource.org/licenses/mit-license.php
9   -*
10   -**/
11   -(function($) {
12   - $.noty = function(options, customContainer) {
13   -
14   - var base = {};
15