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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
<title>jGrowl Examples</title>
<link rel="stylesheet" href="../jquery.jgrowl.css" type="text/css"/>
<style type="text/css">
body {
font-family: "Helvetica neue", Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5 {
margin-top: 2px;
margin-bottom: 2px;
}
.jGrowl .manilla {
background-color: #FFF1C2;
color: navy;
}
.jGrowl .flora {
background: #E6F7D4 url(flora-notification.png) no-repeat;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
opacity: 1;
filter: alpha(opacity = 100);
width: 270px;
height: 90px;
padding: 0px;
overflow: hidden;
border-color: #5ab500;
}
.jGrowl .flora .message {
padding: 5px;
color: #000;
}
.jGrowl .flora .header {
background: url(flora-header.png) no-repeat;
padding: 5px;
}
.jGrowl .flora .close {
background: url(flora-close.png) no-repeat;
padding: 5px;
color: transparent;
padding: 0px;
margin: 5px;
width: 17px;
}
#random {
padding: 20px;
width: 1500px;
background-color: #ff7070;
}
#logs {
margin-top: 30px;
background-color: #efefef;
border: 1px solid #aaa;
padding: 10px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="../jquery.jgrowl.js"></script>
<script type="text/javascript">
// In case you don't have firebug...
if(typeof console === "undefined") {
console = { log: function() { } };
}
(function($){
$(function(){
$.jGrowl.defaults.pool = 5;
$.jGrowl.defaults.closerTemplate = '<div>hide all notifications</div>';
// This value can be true, false or a function to be used as a callback when the closer is clciked
$.jGrowl.defaults.closer = function() {
console.log("Closing everything!", this);
};
// A callback for logging notifications.
$.jGrowl.defaults.log = function(e,m,o) {
$('#logs').append("<div><strong>#" + $(e).attr('id') + "</strong> <em>" + (new Date()).getTime() + "</em>: " + m + " (" + o.theme + ")</div>")
}
$.jGrowl("Sticky notifications don't have an end of life", { sticky: true });
$.jGrowl("Custom theme, custom animations, header, longer life and a whole bunch of callbacks...", {
header: 'Header',
life: 5000,
theme: 'manilla',
speed: 'slow',
beforeOpen: function(e,m,o) {
console.log("I am going to be opened!", this);
},
open: function(e,m,o) {
console.log("I have been opened!", this);
},
beforeClose: function(e,m,o) {
console.log("I am going to be closed!", this);
},
close: function(e,m,o) {
console.log("I have been closed!", this);
},
animateOpen: {
height: "show",
width: "show"
},
animateClose: {
height: "hide",
width: "show"
}
});
$.jGrowl("This message will not open because we have a callback that returns false.", {
beforeOpen: function() {
console.log("Going to open a notification, but not really...");
},
open: function() {
return false;
}
});
$.jGrowl("This message will not close because we have a callback that returns false.", {
beforeClose: function() {
return false;
}
});
$('#test1').jGrowl("Testing a custom container.", {
closer: false,
sticky: true,
glue: 'before'
});
$('#test1').jGrowl("This will be prepended before the last message.", {
glue: 'before'
});
$.jGrowl("This message is sticky and clickable", {
sticky: true,
click: function(msg) {
alert("You clicked me");
}
});
});
})(jQuery);
</script>
</head>
<body>
<h1>jGrowl Tests</h1>
<p><a href="javascript:void(0);" onclick="$.jGrowl('One more message...');">Create a new message.</a></p>
<p><a href="javascript:void(0);" onclick="$('#test1').jGrowl('shutdown');">Shutdown bottom-left container.</a></p>
<div id="random">An extra wide node, watch as the jGrowl containers stay put in the corners of the screen..</div>
<div id="logs"><h3>Log:</h3></div>
<div id="test1" class="bottom-left"></div>
</body>
</html>
|
