Đang cập nhật

Growl-style Notification Plugin For Bootstrap 4 - Hullabaloo.js
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.
1 |
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous" > |
2 |
< script src = "https://code.jquery.com/jquery-3.3.1.min.js" integrity = "sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin = "anonymous" > |
3 |
< script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous" > |
4 |
< script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous" > |
2. Load Font Awesome for the icons.
1 |
< link rel = "stylesheet" href = "https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" > |
3. Load the 'jQuery Hullabaloo.js' script after jQuery.
1 |
< script src = "js/hullabaloo.js" > |
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:
01 |
var hulla = new hullabaloo({ |
02 |
03 |
// where to append the notifications |
04 |
ele: "body" , |
05 |
06 |
// offset |
07 |
offset: { |
08 |
from: "top" , |
09 |
amount: 20 |
10 |
}, |
11 |
12 |
// or 'center', 'left' |
13 |
align: "right" , |
14 |
15 |
// width |
16 |
width: 250, |
17 |
18 |
// for auto dismiss |
19 |
delay: 5000, |
20 |
allow_dismiss: true , |
21 |
22 |
// space between notification boxes |
23 |
stackup_spacing: 10, |
24 |
25 |
// notification message here |
26 |
text: "Notification Message Here", |
27 |
28 |
// Font Awesome icon |
29 |
icon: { |
30 |
success: "fa fa-check-circle" , |
31 |
info: "fa fa-info-circle" , |
32 |
warning: "fa fa-life-ring" , |
33 |
danger: "fa fa-exclamation-circle" , |
34 |
light: "fa fa-sun" , |
35 |
dark: "fa fa-moon" |
36 |
}, |
37 |
38 |
// styles |
39 |
status: "danger" , |
40 |
41 |
// additional CSS classes |
42 |
alertClass: "" , |
43 |
44 |
// callback functions |
45 |
fnStart: false , |
46 |
fnEnd: false , |
47 |
fnEndHide: false , |
48 |
|
49 |
}); |
Changelog:
2018-11-16
- Bugfix
2018-10-15
- v0.0.4
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