Simple Customizable jQuery Notification Bar Plugin - peekABar

Simple Customizable jQuery Notification Bar Plugin - peekABar

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

Basic usage:

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

<link href="path/to/jquery.peekabar.css" rel="stylesheet">
  ...
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="path/to/jquery.peekabar.js"></script> 

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

var defaultBar = new $.peekABar();
defaultBar.show();

3. Pass the customization options to the default bar.

var defaultBar = new $.peekABar({
    // custom html content
    html: 'Your Message Here',
    // for autohide option
    delay: 3000,
    // auto hide after a timeout
    autohide: false,
    // padding
    padding: '1em',
    // background color
    backgroundColor: 'rgb(195, 195, 195)',
    animation: {
      // slide or fade
      type: 'slide',
      // animation speed
      duration: 'slow'
    },
    // additional CSS class
    cssClass: null,
    // CSS opacity
    opacity: '1',
    // top or bottom
    position: 'top',
    // Close the bar by clicking on it.
    closeOnClick: false
});

4. Callback functions.

var defaultBar = new $.peekABar({
    
    // Called after the bar is shown.
    onShow: function() {},
    // Called after the bar is hidden.
    onHide: function() {},
});

5. The method to hide the notification bar.

defaultbar.hide();

Changelog:

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

This awesome jQuery plugin is developed by kunalnagar. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 25.05.2019
  • Source