/
index.html
executable file
·269 lines (227 loc) · 9.73 KB
/
index.html
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gritter demo for jQuery - boedesign.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.gritter.css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.7.1');</script>
<script type="text/javascript" src="js/jquery.gritter.js"></script>
<style type="text/css">
body {
background:#222 url(images/trees.jpg);
color:#fff;
}
a {
color:#00ff00;
}
#container {
width:600px;
background:#333;
padding:10px;
}
</style>
</head>
<body>
<div id="container">
<h1>Gritter Demo</h1>
<p>
The super awesome background is just to show you that all notifications are transparent!
<em>Tested in: FF 3+, Opera 9, IE7, IE8, Safari 4+</em>
</p>
<ul>
<li>
<a href="#" id="add-regular">Add regular notification</a>: Fades out after a certain amount of time, can be set for each notification.
</li>
<li>
<a href="#" id="add-sticky">Add sticky notification</a>: Doesn't run on a fade timer. Just sits there until the user manually removes it by clicking on the (X).
</li>
<li>
<a href="#" id="add-without-image">Add notification without image</a>
</li>
<li>
<a href="#" id="add-gritter-light">Add a white notification</a>: has a 'gritter-light' class_name applied to it.
</li>
<li>
<a href="#" id="add-with-callbacks">Add notification (with callbacks)</a>
</li>
<li>
<a href="#" id="add-sticky-with-callbacks">Add a sticky notification (with callbacks)</a>
</li>
<li>
<a href="#" id="add-max">Add notification with max of 3</a>: If there are 3 messages already on screen, it won't show another one.
</li>
<li>
<a href="#" id="remove-all">Remove all notifications</a>
</li>
<li>
<a href="#" id="remove-all-with-callbacks">Remove all notifications (with callbacks)</a>
</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
// global setting override
/*
$.extend($.gritter.options, {
class_name: 'gritter-light', // for light notifications (can be added directly to $.gritter.add too)
position: 'bottom-left', // possibilities: bottom-left, bottom-right, top-left, top-right
fade_in_speed: 100, // how fast notifications fade in (string or int)
fade_out_speed: 100, // how fast the notices fade out
time: 3000 // hang on the screen for...
});
*/
$('#add-sticky').click(function(){
var unique_id = $.gritter.add({
// (string | mandatory) the heading of the notification
title: 'This is a sticky notice!',
// (string | mandatory) the text inside the notification
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
// (string | optional) the image to display on the left
image: 'http://s3.amazonaws.com/twitter_production/profile_images/132499022/myface_bigger.jpg',
// (bool | optional) if you want it to fade out on its own or just sit there
sticky: true,
// (int | optional) the time you want it to be alive for before fading out
time: '',
// (string | optional) the class name you want to apply to that specific message
class_name: 'my-sticky-class'
});
// You can have it return a unique id, this can be used to manually remove it later using
/*
setTimeout(function(){
$.gritter.remove(unique_id, {
fade: true,
speed: 'slow'
});
}, 6000)
*/
return false;
});
$('#add-regular').click(function(){
$.gritter.add({
// (string | mandatory) the heading of the notification
title: 'This is a regular notice!',
// (string | mandatory) the text inside the notification
text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
// (string | optional) the image to display on the left
image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
// (bool | optional) if you want it to fade out on its own or just sit there
sticky: false,
// (int | optional) the time you want it to be alive for before fading out
time: ''
});
return false;
});
$('#add-max').click(function(){
$.gritter.add({
// (string | mandatory) the heading of the notification
title: 'This is a notice with a max of 3 on screen at one time!',
// (string | mandatory) the text inside the notification
text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.',
// (string | optional) the image to display on the left
image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
// (bool | optional) if you want it to fade out on its own or just sit there
sticky: false,
// (function) before the gritter notice is opened
before_open: function(){
if($('.gritter-item-wrapper').length == 3)
{
// Returning false prevents a new gritter from opening
return false;
}
}
});
return false;
});
$('#add-without-image').click(function(){
$.gritter.add({
// (string | mandatory) the heading of the notification
title: 'This is a notice without an image!',
// (string | mandatory) the text inside the notification
text: 'This will fade out after a certain amount of time. Vivamus eget tincidunt velit. Cum sociis natoque penatibus et <a href="#" style="color:#ccc">magnis dis parturient</a> montes, nascetur ridiculus mus.'
});
return false;
});
$('#add-gritter-light').click(function(){
$.gritter.add({
// (string | mandatory) the heading of the notification
title: 'This is a light notification',
// (string | mandatory) the text inside the notification
text: 'Just add a "gritter-light" class_name to your $.gritter.add or globally to $.gritter.options.class_name',
class_name: 'gritter-light'
});
return false;
});
$('#add-with-callbacks').click(function(){
$.gritter.add({
// (string | mandatory) the heading of the notification
title: 'This is a notice with callbacks!',
// (string | mandatory) the text inside the notification
text: 'The callback is...',
// (function | optional) function called before it opens
before_open: function(){
alert('I am called before it opens');
},
// (function | optional) function called after it opens
after_open: function(e){
alert("I am called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
},
// (function | optional) function called before it closes
before_close: function(e, manual_close){
var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';
alert("I am called before it closes: I am passed the jQuery object for the Gritter element... \n" + manually);
},
// (function | optional) function called after it closes
after_close: function(e, manual_close){
var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';
alert('I am called after it closes. ' + manually);
}
});
return false;
});
$('#add-sticky-with-callbacks').click(function(){
$.gritter.add({
// (string | mandatory) the heading of the notification
title: 'This is a sticky notice with callbacks!',
// (string | mandatory) the text inside the notification
text: 'Sticky sticky notice.. sticky sticky notice...',
// Stickeh!
sticky: true,
// (function | optional) function called before it opens
before_open: function(){
alert('I am a sticky called before it opens');
},
// (function | optional) function called after it opens
after_open: function(e){
alert("I am a sticky called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
},
// (function | optional) function called before it closes
before_close: function(e){
alert("I am a sticky called before it closes: I am passed the jQuery object for the Gritter element... \n" + e);
},
// (function | optional) function called after it closes
after_close: function(){
alert('I am a sticky called after it closes');
}
});
return false;
});
$("#remove-all").click(function(){
$.gritter.removeAll();
return false;
});
$("#remove-all-with-callbacks").click(function(){
$.gritter.removeAll({
before_close: function(e){
alert("I am called before all notifications are closed. I am passed the jQuery object containing all of Gritter notifications.\n" + e);
},
after_close: function(){
alert('I am called after everything has been closed.');
}
});
return false;
});
});
</script>
</body>
</html>