A Free jQuery Plugin with Customizable Notification Bar in jQuery Plugin build by peekABar. its style same as bootstrap button & notifications. this is very lightweight jQuery notification plugin. it helps you create sticky notification bars with lots of customization options. The Ultimate Notification Bar Plugin built on top of jQuery
Table of Contents
How to use :
Installation of plugin.
# NPM
$ npm install jquery-peek-a-bar --save
Add jQuery Library with peekABar jQuery Script and CSS file.
<link 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>
Add Html for call button.
<button class="btn btn-success btn-default-show">Default Bar</button>
<button class="btn btn-danger btn-default-hide">Hide the Default Bar</button>
<button class="btn btn-success btn-autohide-show">Auto Hide Bar</button>
<button class="btn btn-success btn-custom-show">Custom Bar</button>
Display a default notification bar on your page.
var defaultBar = new $.peekABar();
defaultBar.show();
Add 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
});
Callback functions.
var defaultBar = new $.peekABar({
// Called after the bar is shown.
onShow: function() {},
// Called after the bar is hidden.
onHide: function() {},
});
Done
Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
