Easy Customizable jQuery Notification Bar Plugin – peekABar

peekABar is an additional light-weight jQuery notification plugin which helps you create sticky notification bars with numerous customization choices.

Set up and Obtain:

# NPM
$ npm set up jquery-peek-a-bar --save

Tips on how to use it:

1. Add references to jQuery library and the jQuery peekABar plugin’s stylesheet and JS recordsdata within the html web page.

<hyperlink href="/path/to/dist/jquery.peekabar.min.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script> 
<script src="/path/to/dist/jquery.peekabar.min.js"></script> 

2. Show a default notification bar in your net web page.

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

3. Cross the customization choices to the default bar.

var defaultBar = new $.peekABar({

    // customized html content material
    html: 'Your Message Right here',

    // for autohide possibility
    delay: 3000,

    // auto cover after a timeout
    autohide: false,

    // padding
    padding: '1em',

    // background shade
    backgroundColor: 'rgb(195, 195, 195)',

    animation: {

      // slide or fade
      sort: 'slide',

      // animation pace
      period: 'gradual'

    },

    // extra CSS class
    cssClass: null,

    // CSS opacity
    opacity: '1',

    // prime or backside
    place: 'prime',

    // Shut the bar by clicking on it.
    closeOnClick: false

});

4. Callback features.

var defaultBar = new $.peekABar({
    
    // Referred to as after the bar is proven.
    onShow: operate() {},

    // Referred to as after the bar is hidden.
    onHide: operate() {},

});

5. The strategy to cover the notification bar.

defaultbar.cover();

Changelog:

v3.2.1 … v3.2.72 (2022-09-10)

v3.1.0 (2020-12-16)

• Higher deployment course of

v3.0.2 (2020-08-28)

v3.0.1 (2020-08-03)

v3.0.0 (2019-06-07)

• Improve from JSHint to ESLint

v2.0.0 (2019-05-25)

• Improve from JSHint to ESLint
• Add assist for Babel transpiling
• Take away CodeClimate and Travis construct recordsdata because it wants extra analysis
• Replace README with extra information

2015-12-25

This superior jQuery plugin is developed by kunalnagar. For extra Superior Usages, please test the demo web page or go to the official web site.