Hullabaloo.js
ΠΡΠΎΡΡΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΠΏΠΎΠ²Π΅ΡΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠΈΠ»ΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ Bootstrap Π°Π»Π΅ΡΡΠΎΠ². ΠΠ»Ρ Π΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ bootstrap-growl.
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ
- Latest version of jQuery.
- 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 | ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° Π°Π»Π΅ΡΡΠ° |