This time I will share jQuery Plugin and tutorial about Basic Twitter-like Notify Bar Plugin with jQuery, hope it will help you in programming stack.
File Size: | 161 KB |
---|---|
Views Total: | 3272 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Notify bar is a simple-to-use yet highly configurable jQuery plugin used to display various types of message notifications on your webpage as you’ve seen on Twitter.
How to use it:
1. Load the required jquery.notifyBar.css
for the basic notification styles.
1 |
< link rel = "stylesheet" href = "css/jquery.notifyBar.css" > |
2. Load the jquery.notifyBar.js
script after jQuery library at the bottom of your webpage.
1 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
2 |
< script src = "jquery.notifyBar.js" ></ script > |
3. Create a normal notify bar with custom messages.
1 |
$.notifyBar({html: 'Your message here' ,}); |
4. Full plugin options to customize the notify bar.
01 |
// custom message |
02 |
html : 'Your message here' , |
03 |
04 |
// delay |
05 |
delay : 3000, |
06 |
07 |
// animation speed |
08 |
animationSpeed : 200, |
09 |
10 |
// error, success, warning or custom CSS class |
11 |
cssClass : '' , |
12 |
13 |
// target object |
14 |
jqObject : '' , |
15 |
16 |
// display close button |
17 |
close : false , |
18 |
19 |
// text for close button |
20 |
closeText : '×' , |
21 |
22 |
// click the notify bar to close |
23 |
closeOnClick : true , |
24 |
25 |
// hover over the notify bar to close |
26 |
closeOnOver : false , |
27 |
28 |
// if enabled, notify bar don't close until user presses the close button. |
29 |
waitingForClose : true , |
30 |
31 |
// or 'bottom' |
32 |
position : 'top' |
33 |
34 |
// callback functions |
35 |
onBeforeShow : null , |
36 |
onShow : null , |
37 |
onBeforeHide : null , |
38 |
onHide : null , |
Changelog:
2020-10-12
- Updated for jQuery 3.5+
2016-03-02
- Add waitingForClose option
2015-06-30
- Add hide on demand