-
Notifications
You must be signed in to change notification settings - Fork 199
Expand file tree
/
Copy pathindex.html
More file actions
112 lines (84 loc) · 5.75 KB
/
Copy pathindex.html
File metadata and controls
112 lines (84 loc) · 5.75 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="description" content="Bootstrap-growl : Pretty simple jQuery plugin that turns standard Bootstrap alerts into "Growl-like" notifications.">
<link rel="stylesheet" type="text/css" media="screen" href="stylesheets/stylesheet.css">
<title>Bootstrap-growl</title>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/ifightcrime/bootstrap-growl">View on GitHub</a>
<h1 id="project_title">Bootstrap-growl</h1>
<h2 id="project_tagline">Pretty simple jQuery plugin that turns standard Bootstrap alerts into "Growl-like" notifications.</h2>
<section id="downloads">
<a class="zip_download_link" href="https://github.com/ifightcrime/bootstrap-growl/zipball/master">Download this project as a .zip file</a>
<a class="tar_download_link" href="https://github.com/ifightcrime/bootstrap-growl/tarball/master">Download this project as a tar.gz file</a>
</section>
</header>
</div>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<h1>
<a id="bootstrap-growl" class="anchor" href="#bootstrap-growl" aria-hidden="true"><span class="octicon octicon-link"></span></a>bootstrap-growl</h1>
<p>Pretty simple jQuery plugin that turns standard Bootstrap alerts into hovering "Growl-like" notifications.</p>
<h2>
<a id="demo" class="anchor" href="#demo" aria-hidden="true"><span class="octicon octicon-link"></span></a>Demo</h2>
<p>I have a basic demo set up at jsfiddle for the time being which you can view here: <a href="http://jsfiddle.net/ifightcrime/Us6WX/1008/">http://jsfiddle.net/ifightcrime/Us6WX/1008/</a></p>
<h2>
<a id="features" class="anchor" href="#features" aria-hidden="true"><span class="octicon octicon-link"></span></a>Features</h2>
<ul>
<li>Uses standard <a href="http://twitter.github.com/bootstrap/components.html#alerts">Twitter Bootstrap alerts</a> which provides 'info', 'danger', and 'success' styles.</li>
<li>Multiple growls called consecutively are stacked up one after another in a list.</li>
<li>Automatically fades growls away after a default of 4 seconds.</li>
</ul>
<h2>
<a id="dependencies" class="anchor" href="#dependencies" aria-hidden="true"><span class="octicon octicon-link"></span></a>Dependencies</h2>
<ol>
<li>Latest version of jQuery. (tested on 1.11.0)</li>
<li>
<a href="http://twitter.github.com/bootstrap/index.html">Twitter Bootstrap</a>. (current rev tested with 3.3.1)</li>
</ol>
<h2>
<a id="usage" class="anchor" href="#usage" aria-hidden="true"><span class="octicon octicon-link"></span></a>Usage</h2>
<p>Include the dependencies and <code>jquery.bootstrap-growl.min.js</code> into your page and call the following:</p>
<div class="highlight highlight-javascript"><pre>$.bootstrapGrowl(<span class="pl-s1"><span class="pl-pds">"</span>My message<span class="pl-pds">"</span></span>);</pre></div>
<h2>
<a id="available-options" class="anchor" href="#available-options" aria-hidden="true"><span class="octicon octicon-link"></span></a>Available Options</h2>
<p>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.</p>
<div class="highlight highlight-javascript"><pre>$.bootstrapGrowl(<span class="pl-s1"><span class="pl-pds">"</span>another message, yay!<span class="pl-pds">"</span></span>, {
ele<span class="pl-k">:</span> <span class="pl-s1"><span class="pl-pds">'</span>body<span class="pl-pds">'</span></span>, <span class="pl-c">// which element to append to</span>
type<span class="pl-k">:</span> <span class="pl-s1"><span class="pl-pds">'</span>info<span class="pl-pds">'</span></span>, <span class="pl-c">// (null, 'info', 'danger', 'success')</span>
offset<span class="pl-k">:</span> {from<span class="pl-k">:</span> <span class="pl-s1"><span class="pl-pds">'</span>top<span class="pl-pds">'</span></span>, amount<span class="pl-k">:</span> <span class="pl-c1">20</span>}, <span class="pl-c">// 'top', or 'bottom'</span>
align<span class="pl-k">:</span> <span class="pl-s1"><span class="pl-pds">'</span>right<span class="pl-pds">'</span></span>, <span class="pl-c">// ('left', 'right', or 'center')</span>
width<span class="pl-k">:</span> <span class="pl-c1">250</span>, <span class="pl-c">// (integer, or 'auto')</span>
delay<span class="pl-k">:</span> <span class="pl-c1">4000</span>,
allow_dismiss<span class="pl-k">:</span> <span class="pl-c1">true</span>,
stackup_spacing<span class="pl-k">:</span> <span class="pl-c1">10</span> <span class="pl-c">// spacing between consecutively stacked growls.</span>
});</pre></div>
<p>Note: Previous <code>top_offset</code> is not broken by this latest change.</p>
<h2>
<a id="additional-contributors" class="anchor" href="#additional-contributors" aria-hidden="true"><span class="octicon octicon-link"></span></a>Additional Contributors</h2>
<ul>
<li>Jose Martinez <a href="https://github.com/callado4">https://github.com/callado4</a>
</li>
<li>Lloyd Watkin <a href="https://github.com/lloydwatkin">https://github.com/lloydwatkin</a>
</li>
<li>TruongSinh Tran-Nguyen <a href="https://github.com/tran-nguyen">https://github.com/tran-nguyen</a>
</li>
</ul>
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p class="copyright">Bootstrap-growl maintained by <a href="https://github.com/ifightcrime">ifightcrime</a></p>
<p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
</footer>
</div>
</body>
</html>