| 776 |
lars |
1 |
#bootstrap-growl
|
|
|
2 |
|
|
|
3 |
Pretty simple jQuery plugin that turns standard Bootstrap alerts into hovering "Growl-like" notifications.
|
|
|
4 |
|
|
|
5 |
##Demo
|
|
|
6 |
|
|
|
7 |
I have a basic demo set up at jsfiddle for the time being which you can view here: http://jsfiddle.net/ifightcrime/Us6WX/1008/
|
|
|
8 |
|
|
|
9 |
##Features
|
|
|
10 |
|
|
|
11 |
* Uses standard [Twitter Bootstrap alerts](http://twitter.github.com/bootstrap/components.html#alerts) which provides 'info', 'danger', and 'success' styles.
|
|
|
12 |
* Multiple growls called consecutively are stacked up one after another in a list.
|
|
|
13 |
* Automatically fades growls away after a default of 4 seconds.
|
|
|
14 |
|
|
|
15 |
##Dependencies
|
|
|
16 |
|
|
|
17 |
1. Latest version of jQuery. (tested on 1.11.0)
|
|
|
18 |
2. [Twitter Bootstrap](http://twitter.github.com/bootstrap/index.html). (current rev tested with 3.3.1)
|
|
|
19 |
|
|
|
20 |
##Usage
|
|
|
21 |
|
|
|
22 |
Include the dependencies and `jquery.bootstrap-growl.min.js` into your page and call the following:
|
|
|
23 |
|
|
|
24 |
```javascript
|
|
|
25 |
$.bootstrapGrowl("My message");
|
|
|
26 |
```
|
|
|
27 |
|
|
|
28 |
##Available Options
|
|
|
29 |
|
|
|
30 |
By default, growls use the standard 'alert' Bootstrap style, are 250px wide, right aligned, and are positioned 20px from the top right of the page.
|
|
|
31 |
|
|
|
32 |
```javascript
|
|
|
33 |
$.bootstrapGrowl("another message, yay!", {
|
|
|
34 |
ele: 'body', // which element to append to
|
|
|
35 |
type: 'info', // (null, 'info', 'danger', 'success')
|
|
|
36 |
offset: {from: 'top', amount: 20}, // 'top', or 'bottom'
|
|
|
37 |
align: 'right', // ('left', 'right', or 'center')
|
|
|
38 |
width: 250, // (integer, or 'auto')
|
|
|
39 |
delay: 4000, // Time while the message will be displayed. It's not equivalent to the *demo* timeOut!
|
|
|
40 |
allow_dismiss: true, // If true then will display a cross to close the popup.
|
|
|
41 |
stackup_spacing: 10 // spacing between consecutively stacked growls.
|
|
|
42 |
});
|
|
|
43 |
```
|
|
|
44 |
|
|
|
45 |
Note: Previous ```top_offset``` is not broken by this latest change.
|
|
|
46 |
|
|
|
47 |
##Additional Contributors
|
|
|
48 |
|
|
|
49 |
* Jose Martinez https://github.com/callado4
|
|
|
50 |
* Lloyd Watkin https://github.com/lloydwatkin
|
|
|
51 |
* TruongSinh Tran-Nguyen https://github.com/tran-nguyen
|