Demo Download
The jQuery Hullabaloo.js plugin makes uses of Bootstrap 4 alerts component to create growl- and toast-like notifications on the web app. Inspired by ifightcrime's jQuery Bootstrap Growl plugin.
Features:
- 3 position options: right, center or left.
- 5 notification styles: success, info, warning, danger, light, dark.
- Auto dismiss after 5 seconds.
- Custom notification icons. Based on Font Awesome.
- Auto stacks up one after another.
- Useful callback functions.
How to use it:
1. To get started, make sure the latest jQuery and Bootstrap 4 framework are loaded properly in the page.
2. Load Font Awesome for the icons.
3. Load the 'jQuery Hullabaloo.js' script after jQuery.
1 |
<script src="js/hullabaloo.js">script> |
4. Initialize the plugin and we're ready to go.
1 |
var hulla =new hullabaloo(); |
5. Display notifications on the webpage using the following JavaScript syntax.
1 |
hulla.send("Success Message","success"); |
2 |
hulla.send("Info Message","info"); |
3 |
hulla.send("Warning Message","warning"); |
4 |
hulla.send('Danger Message','danger') |
5 |
hulla.send('Light Theme','light') |
6 |
hulla.send('Dark Theme','dark') |
6. Config the Hullabaloo.js plugin with the following settings:
view source
01 |
var hulla =new hullabaloo({ |
03 |
// where to append the notifications |
12 |
// or 'center', 'left' |
22 |
// space between notification boxes |
25 |
// notification message here |
30 |
success:"fa fa-check-circle", |
31 |
info:"fa fa-info-circle", |
32 |
warning:"fa fa-life-ring", |
33 |
danger:"fa fa-exclamation-circle", |
41 |
// additional CSS classes |
Changelog:
2018-11-16
2018-10-15
This awesome jQuery plugin is developed by OzyAst. For more Advanced Usages, please check the demo page or visit the official website.
Nguồn: https://www.jqueryscript.net/other/Notification-Plugin-Bootstrap-4-Hullabaloo.html
