πŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The jQuery Hullabaloo.js plugin makes uses of Bootstrap 4 alerts component to create growl- and toast-like notifications on the web app.

Bootstrap bootstrap-4 Notification growl-notification toast-m

Documentation

Hullabaloo.js

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΠΏΠΎΠ²Π΅Ρ‰Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ стили стандартных Bootstrap Π°Π»Π΅Ρ€Ρ‚ΠΎΠ². Для Π΅Π³ΠΎ создания использовался ΠΏΠ»Π°Π³ΠΈΠ½ bootstrap-growl.

Зависимости

  1. Latest version of jQuery.
  2. Twitter Bootstrap. (current rev tested with 4.0.0) (ΠΠ΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ)

ИспользованиС

ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ стили bootstrap ΠΈΠ»ΠΈ Ρ„Π°ΠΉΠ» стилСй hullabaloo.css ΠΈ hullabaloo.js Π½Π° свою страницу, Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π³Π»Π°Π²Π½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ hullabaloo ΠΈ Π²Ρ‹Π·Ρ‹Π²Π°ΠΉΡ‚Π΅.

// init $.hulla = new hullabaloo(); // Π—Π°Π΄Π°Π΅ΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π°Π»Π΅Ρ€Ρ‚Π° ΠΈ отступ ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π° $.hulla.options.offset = {     from: "top",     amount: 30 }; // Π—Π°Π΄Π°Π΅ΠΌ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Π°Π»Π΅Ρ€Ρ‚Π°ΠΌΠΈ $.hulla.options.stackup_spacing = 15;  // Π’Ρ‹Π·Ρ‹Π²Π°Π΅ΠΌ Π°Π»Π΅Ρ€Ρ‚ $.hulla.send("Π”ΠΎΠ±Ρ€ΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°Ρ‚ΡŒ!", "success");  // ΠŸΡ€ΠΈΠ½ΡƒΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΎΡ‚ΠΌΠ΅Π½Π° Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ $.hulla.send("Π”ΠΎΠ±Ρ€ΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°Ρ‚ΡŒ!", "success", 0);

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ

МоТно Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π²Ρ‹Π·ΠΎΠ² Π²Π°ΡˆΠΈΡ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π² Ρ€Π°Π·Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΆΠΈΠ·Π½ΠΈ Π°Π»Π΅Ρ€Ρ‚Π°

// Π€-ия выполнится ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π°Π»Π΅Ρ€Ρ‚ вывСдСтся Π½Π° экран, Π½ΠΎ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΠΎΠ½ исчСзнСт $.hulla.options.fnEnd = function() {     alert("АлСрт вывСлся ΠΈ скоро исчСзнСт") }  // Π€-ия выполнится Π΅Ρ‰Π΅ Π΄ΠΎ появлСния Π°Π»Π΅Ρ€Ρ‚Π° Π½Π° экран $.hulla.options.fnStart = function() {     alert("АлСрт скоро появится"); }  // Π€-ия выполнится ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π°Π»Π΅Ρ€Ρ‚ исчСзнСт с экрана $.hulla.options.fnEndHide = function() {     alert("АлСрт закрылся"); }

ΠžΠΏΡ†ΠΈΠΈ

ИзмСнСниС ΠΎΠΏΡ†ΠΈΠΉ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

$.hulla.options.<опция> = <Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅>;

Бписок доступных ΠΎΠΏΡ†ΠΈΠΉ:

Option Default Description
offset.from top ПолоТСниС Π°Π»Π΅Ρ€Ρ‚Π° ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ (top, bottom)
offset.amount 20 ΠžΡ‚ΡΡ‚ΡƒΠΏ Π°Π»Π΅Ρ€Ρ‚Π° ΠΎΡ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ экрана
align right ПолоТСниС Π°Π»Π΅Ρ€Ρ‚Π° ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»Π΅ (left, right, center)
stackup_spacing 10 ΠžΡ‚ΡΡ‚ΡƒΠΏ ΠΌΠ΅ΠΆΠ΄Ρƒ Π°Π»Π΅Ρ€Ρ‚Π°ΠΌΠΈ
width 250 Π¨ΠΈΡ€ΠΈΠ½Π° Π°Π»Π΅Ρ€Ρ‚Π°
delay 4000 Π—Π°Π΄Π΅Ρ€ΠΆΠΊΠ° отобраТСния
allow_dismiss true Кнопка закрытия Π°Π»Π΅Ρ€Ρ‚Π°
text ВСкст ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
icon.success Иконка ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
icon.info Иконка ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
icon.warning Иконка ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
icon.danger Иконка ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
icon.light Иконка ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
icon.dark Иконка ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
status danger Бтатус ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
alertClass empty Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ класс для Π±Π»ΠΎΠΊΠ° Π°Π»Π΅Ρ€Ρ‚Π°

You May Also Like