Simple Customizable jQuery Notification Bar Plugin peekABar - Free Download Simple Customizable jQuery Notification Bar Plugin - peekABar

Free Download Simple Customizable jQuery Notification Bar Plugin – peekABar

By Posted on

This time I will share jQuery Plugin and tutorial about Simple Customizable jQuery Notification Bar Plugin – peekABar, hope it will help you in programming stack.

Simple Customizable jQuery Notification Bar Plugin peekABar - Free Download Simple Customizable jQuery Notification Bar Plugin - peekABar
File Size: 7.87 KB
Views Total: 1676
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

peekABar is an extra lightweight jQuery notification plugin which helps you create sticky notification bars with lots of customization options.

Install and Download:

view source
1 # NPM
2 $ npm install jquery-peek-a-bar --save

How to use it:

1. Add references to jQuery library and the jQuery peekABar plugin’s stylesheet and JS files in the html page.

view source
1 <link href="/path/to/dist/jquery.peekabar.min.css" rel="stylesheet" />
2 <script src="/path/to/cdn/jquery.min.js"></script>
3 <script src="/path/to/dist/jquery.peekabar.min.js"></script>

2. Display a default notification bar on your web page.

view source
1 var defaultBar = new $.peekABar();
2 defaultBar.show();

3. Pass the customization options to the default bar.

view source
01 var defaultBar = new $.peekABar({
02  
03     // custom html content
04     html: 'Your Message Here',
05  
06     // for autohide option
07     delay: 3000,
08  
09     // auto hide after a timeout
10     autohide: false,
11  
12     // padding
13     padding: '1em',
14  
15     // background color
16     backgroundColor: 'rgb(195, 195, 195)',
17  
18     animation: {
19  
20       // slide or fade
21       type: 'slide',
22  
23       // animation speed
24       duration: 'slow'
25  
26     },
27  
28     // additional CSS class
29     cssClass: null,
30  
31     // CSS opacity
32     opacity: '1',
33  
34     // top or bottom
35     position: 'top',
36  
37     // Close the bar by clicking on it.
38     closeOnClick: false
39  
40 });

4. Callback functions.

view source
1 var defaultBar = new $.peekABar({
2      
3     // Called after the bar is shown.
4     onShow: function() {},
5  
6     // Called after the bar is hidden.
7     onHide: function() {},
8  
9 });

5. The method to hide the notification bar.

view source
1 defaultbar.hide();

Changelog:

v3.1.0 (2020-12-16)

  • Better deployment process

v3.0.2 (2020-08-28)

  • added dist files.

v3.0.1 (2020-08-03)

v3.0.0 (2019-06-07)

  • Upgrade from JSHint to ESLint

v2.0.0 (2019-05-25)

  • Upgrade from JSHint to ESLint
  • Add support for Babel transpiling
  • Remove CodeClimate and Travis build files as it needs more research
  • Update README with more info

2015-12-25

  • bugfix

Related posts: