diff options
Diffstat (limited to 'library/jgrowl/examples/jgrowl.html')
| -rwxr-xr-x | library/jgrowl/examples/jgrowl.html | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/library/jgrowl/examples/jgrowl.html b/library/jgrowl/examples/jgrowl.html new file mode 100755 index 000000000..e10fdd6cb --- /dev/null +++ b/library/jgrowl/examples/jgrowl.html @@ -0,0 +1,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> |