Trang chủ / HTML + Javascript + CSS / Growl-style Notification Plugin For Bootstrap 4 - Hullabaloo.js

47 views

Growl-style Notification Plugin For Bootstrap 4 - Hullabaloo.js

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.

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"></script>
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"></script>
4 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"crossorigin="anonymous"></script>

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"></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({
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:"<a href="https://www.jqueryscript.net/tags.php?/Notification/">Notification</a> 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


Chia sẻ với bạn bè của bạn!




© 2017 TEDU LEARNING AND ENTERTAINMENT

NGUYEN MINH HOANG  

01 LE LOI ST, WARD 1, MY THO CITY, TIEN GIANG PROVINCE
Email: minhhoangtgg@gmail.com | Mobile N0:
+84835.58.58.78

Website: https://tedu.edu.vn

Facebook: https://www.facebook.com/hoangminhisme

 

tedu footer