This time I will share jQuery Plugin and tutorial about Tiny Customizable jQuery Notification Plugin – Noti, hope it will help you in programming stack.
| File Size: | 5.92 KB |
|---|---|
| Views Total: | 1504 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Noti.js is a small yet customizable jQuery plugin used to display various types of toast-style sticky and/or temporary notification messages on the webpage.
How to use it:
1. The jQuery Noti.js plugin requires jQuery JavaScript loaded properly in the document.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="dist/noti.js"></script> |
2. Initialize the plugin and generate some notifications on the webpage.
01 |
noti |
02 |
.init({ |
03 |
containerId: "noti", |
04 |
notiElClass: "notification", |
05 |
tapToDismiss: true, |
06 |
messageClass: "notification-message", |
07 |
itemClasses: [{ |
08 |
type: "success", |
09 |
className: "success" |
10 |
}, { |
11 |
type: "error", |
12 |
className: "error" |
13 |
}, { |
14 |
type: "warning", |
15 |
className: "warning" |
16 |
}, ] |
17 |
}) |
18 |
.createNoti({ |
19 |
message: "Successfully running notifiy", |
20 |
type: "success", |
21 |
showDuration: 7, |
22 |
sticky: true, |
23 |
onClick: function() { |
24 |
noti.createNoti({ |
25 |
message: "<a href="https://www.jqueryscript.net/tags.php?/Notification/">Notification</a> clicked", |
26 |
type: "success", |
27 |
showDuration: 2 |
28 |
}) |
29 |
} |
30 |
}) |
31 |
.createNoti({ |
32 |
message: "Warning about something", |
33 |
type: "warning", |
34 |
showDuration: 5, |
35 |
onShow: function() { |
36 |
console.log("Showed") |
37 |
} |
38 |
}) |
39 |
.createNoti({ |
40 |
message: "Error something is wrong", |
41 |
type: "error", |
42 |
showDuration: 7, |
43 |
onClick: function() { |
44 |
noti.createNoti({ |
45 |
message: "Error dismissed", |
46 |
type: "warning", |
47 |
showDuration: 3 |
48 |
}) |
49 |
} |
50 |
}) |
3. The primary CSS styles for the plugin.
01 |
#noti { |
02 |
position: absolute; |
03 |
margin-left: 35px; |
04 |
margin-top: 25px; |
05 |
display: block; |
06 |
} |
07 |
08 |
.notification { |
09 |
color: white; |
10 |
border-radius: 15px; |
11 |
padding: 15px; |
12 |
padding-right: 10px; |
13 |
margin-bottom: 15px; |
14 |
width: 15em; |
15 |
word-wrap: break-word; |
16 |
} |
4. Create your own CSS styles for different notification types.
1 |
.error { background-color: rgb(231, 76, 60) } |
2 |
3 |
.success { background-color: rgb(46, 204, 113) } |
4 |
5 |
.warning { background-color: rgb(241, 196, 15) } |
6 |
7 |
.primary { background-color: rgb(52, 152, 219); } |
This awesome jQuery plugin is developed by abdi42. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
