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