查看 | 历史 | 提交 | 提交对比
hjg
2024-10-30 8cf23534166c07e711aac2a25911ada317ba01f0
提交 | 用户 | 时间
58d006 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
A 2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>Gritter demo for jQuery - boedesign.com</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <link rel="stylesheet" type="text/css" href="css/jquery.gritter.css" />
7 <script type="text/javascript" src="http://www.google.com/jsapi"></script>
8 <script type="text/javascript">google.load('jquery', '1.7.1');</script>
9 <script type="text/javascript" src="js/jquery.gritter.js"></script>
10 <style type="text/css">
11     body {
12         background:#222 url(images/trees.jpg);
13         color:#fff;
14     }
15     a {
16         color:#00ff00;
17     }
18     #container {
19         width:600px;
20         background:#333;
21         padding:10px;
22     }
23 </style>
24 </head>
25
26
27 <body>
28 <div id="container">
29     <h1>Gritter Demo</h1>
30     <p>
31         The super awesome background is just to show you that all notifications are transparent!
32         <em>Tested in: FF 3+, Opera 9, IE7, IE8, Safari 4+</em>
33     </p>
34     <ul>
35         <li>
36             <a href="#" id="add-regular">Add regular notification</a>: Fades out after a certain amount of time, can be set for each notification.
37         </li>
38         <li>
39             <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).
40         </li>
41         <li>
42             <a href="#" id="add-without-image">Add notification without image</a>
43         </li>
44         <li>
45             <a href="#" id="add-gritter-light">Add a white notification</a>: has a 'gritter-light' class_name applied to it.
46         </li>
47         <li>
48             <a href="#" id="add-with-callbacks">Add notification (with callbacks)</a>
49         </li>
50         <li>
51             <a href="#" id="add-sticky-with-callbacks">Add a sticky notification (with callbacks)</a>
52         </li>
53         <li>
54             <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.
55         </li>
56         <li>
57             <a href="#" id="remove-all">Remove all notifications</a>
58         </li>
59         <li>
60             <a href="#" id="remove-all-with-callbacks">Remove all notifications (with callbacks)</a>
61         </li>
62     </ul>
63 </div>
64
65 <script type="text/javascript">
66
67     $(function(){
68
69         // global setting override
70         /*
71         $.extend($.gritter.options, {
72             class_name: 'gritter-light', // for light notifications (can be added directly to $.gritter.add too)
73             position: 'bottom-left', // possibilities: bottom-left, bottom-right, top-left, top-right
74             fade_in_speed: 100, // how fast notifications fade in (string or int)
75             fade_out_speed: 100, // how fast the notices fade out
76             time: 3000 // hang on the screen for...
77         });
78         */
79
80         $('#add-sticky').click(function(){
81
82             var unique_id = $.gritter.add({
83                 // (string | mandatory) the heading of the notification
84                 title: 'This is a sticky notice!',
85                 // (string | mandatory) the text inside the notification
86                 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.',
87                 // (string | optional) the image to display on the left
88                 image: 'http://s3.amazonaws.com/twitter_production/profile_images/132499022/myface_bigger.jpg',
89                 // (bool | optional) if you want it to fade out on its own or just sit there
90                 sticky: true,
91                 // (int | optional) the time you want it to be alive for before fading out
92                 time: '',
93                 // (string | optional) the class name you want to apply to that specific message
94                 class_name: 'my-sticky-class'
95             });
96
97             // You can have it return a unique id, this can be used to manually remove it later using
98             /*
99             setTimeout(function(){
100
101                 $.gritter.remove(unique_id, {
102                     fade: true,
103                     speed: 'slow'
104                 });
105
106             }, 6000)
107             */
108
109             return false;
110
111         });
112
113         $('#add-regular').click(function(){
114
115             $.gritter.add({
116                 // (string | mandatory) the heading of the notification
117                 title: 'This is a regular notice!',
118                 // (string | mandatory) the text inside the notification
119                 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.',
120                 // (string | optional) the image to display on the left
121                 image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
122                 // (bool | optional) if you want it to fade out on its own or just sit there
123                 sticky: false,
124                 // (int | optional) the time you want it to be alive for before fading out
125                 time: ''
126             });
127
128             return false;
129
130         });
131
132         $('#add-max').click(function(){
133
134             $.gritter.add({
135                 // (string | mandatory) the heading of the notification
136                 title: 'This is a notice with a max of 3 on screen at one time!',
137                 // (string | mandatory) the text inside the notification
138                 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.',
139                 // (string | optional) the image to display on the left
140                 image: 'http://a0.twimg.com/profile_images/59268975/jquery_avatar_bigger.png',
141                 // (bool | optional) if you want it to fade out on its own or just sit there
142                 sticky: false,
143                 // (function) before the gritter notice is opened
144                 before_open: function(){
145                     if($('.gritter-item-wrapper').length == 3)
146                     {
147                         // Returning false prevents a new gritter from opening
148                         return false;
149                     }
150                 }
151             });
152
153             return false;
154
155         });
156
157         $('#add-without-image').click(function(){
158
159             $.gritter.add({
160                 // (string | mandatory) the heading of the notification
161                 title: 'This is a notice without an image!',
162                 // (string | mandatory) the text inside the notification
163                 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.'
164             });
165
166             return false;
167         });
168
169         $('#add-gritter-light').click(function(){
170
171             $.gritter.add({
172                 // (string | mandatory) the heading of the notification
173                 title: 'This is a light notification',
174                 // (string | mandatory) the text inside the notification
175                 text: 'Just add a "gritter-light" class_name to your $.gritter.add or globally to $.gritter.options.class_name',
176                 class_name: 'gritter-light'
177             });
178
179             return false;
180         });
181
182         $('#add-with-callbacks').click(function(){
183
184             $.gritter.add({
185                 // (string | mandatory) the heading of the notification
186                 title: 'This is a notice with callbacks!',
187                 // (string | mandatory) the text inside the notification
188                 text: 'The callback is...',
189                 // (function | optional) function called before it opens
190                 before_open: function(){
191                     alert('I am called before it opens');
192                 },
193                 // (function | optional) function called after it opens
194                 after_open: function(e){
195                     alert("I am called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
196                 },
197                 // (function | optional) function called before it closes
198                 before_close: function(e, manual_close){
199                     var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';
200                     alert("I am called before it closes: I am passed the jQuery object for the Gritter element... \n" + manually);
201                 },
202                 // (function | optional) function called after it closes
203                 after_close: function(e, manual_close){
204                     var manually = (manual_close) ? 'The "X" was clicked to close me!' : '';
205                     alert('I am called after it closes. ' + manually);
206                 }
207             });
208
209             return false;
210         });
211
212         $('#add-sticky-with-callbacks').click(function(){
213
214             $.gritter.add({
215                 // (string | mandatory) the heading of the notification
216                 title: 'This is a sticky notice with callbacks!',
217                 // (string | mandatory) the text inside the notification
218                 text: 'Sticky sticky notice.. sticky sticky notice...',
219                 // Stickeh!
220                 sticky: true,
221                 // (function | optional) function called before it opens
222                 before_open: function(){
223                     alert('I am a sticky called before it opens');
224                 },
225                 // (function | optional) function called after it opens
226                 after_open: function(e){
227                     alert("I am a sticky called after it opens: \nI am passed the jQuery object for the created Gritter element...\n" + e);
228                 },
229                 // (function | optional) function called before it closes
230                 before_close: function(e){
231                     alert("I am a sticky called before it closes: I am passed the jQuery object for the Gritter element... \n" + e);
232                 },
233                 // (function | optional) function called after it closes
234                 after_close: function(){
235                     alert('I am a sticky called after it closes');
236                 }
237             });
238
239             return false;
240
241         });
242
243         $("#remove-all").click(function(){
244
245             $.gritter.removeAll();
246             return false;
247
248         });
249
250         $("#remove-all-with-callbacks").click(function(){
251
252             $.gritter.removeAll({
253                 before_close: function(e){
254                     alert("I am called before all notifications are closed.  I am passed the jQuery object containing all  of Gritter notifications.\n" + e);
255                 },
256                 after_close: function(){
257                     alert('I am called after everything has been closed.');
258                 }
259             });
260             return false;
261
262         });
263
264
265     });
266 </script>
267
268 </body>
269 </html>