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:"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