diff options
| author | Mario Vavti <mario@mariovavti.com> | 2019-05-13 10:53:10 +0200 |
|---|---|---|
| committer | Mario Vavti <mario@mariovavti.com> | 2019-05-13 10:53:10 +0200 |
| commit | 1d5fff9f58b486a519b74b12a907dd1acd32ba3c (patch) | |
| tree | e70107c0ff7c276c53d801f7d8108ce2709fafc9 /library/jgrowl/examples/bootstrap.html | |
| parent | fbe8d6144aeaed179aaccd7724aba51e4ca000a8 (diff) | |
| download | volse-hubzilla-1d5fff9f58b486a519b74b12a907dd1acd32ba3c.tar.gz volse-hubzilla-1d5fff9f58b486a519b74b12a907dd1acd32ba3c.tar.bz2 volse-hubzilla-1d5fff9f58b486a519b74b12a907dd1acd32ba3c.zip | |
upgrade jgrowl
Diffstat (limited to 'library/jgrowl/examples/bootstrap.html')
| -rw-r--r-- | library/jgrowl/examples/bootstrap.html | 91 |
1 files changed, 91 insertions, 0 deletions
diff --git a/library/jgrowl/examples/bootstrap.html b/library/jgrowl/examples/bootstrap.html new file mode 100644 index 000000000..6e069a3b9 --- /dev/null +++ b/library/jgrowl/examples/bootstrap.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content=""> + <meta name="author" content=""> + + <title>jGrowl and Bootstrap</title> + + <link rel="stylesheet" href="../jquery.jgrowl.css" type="text/css"/> + <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> + + <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> + <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> + <![endif]--> + + <style> + body { + padding-top: 50px; + } + </style> + </head> + + <body> + <div id="jGrowl-container1" class="jGrowl top-right"></div> + + <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> + <div class="container"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <a class="navbar-brand" href="#">jGrowl</a> + </div> + <div class="collapse navbar-collapse"> + <ul class="nav navbar-nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#about">About</a></li> + <li><a href="#contact">Contact</a></li> + </ul> + </div><!--/.nav-collapse --> + </div> + </div> + + <div class="container"> + + <div> + <h1>jGrowl and Bootstrap</h1> + <p class="lead">This is a Bootstrap starter template with jGrowl integrated. As you can see it's extremely easy to make jGrowl look and feel like part of Bootstrap.</p> + </div> + <div id="jGrowl-container2" class="jGrowl"></div> + </div><!-- /.container --> + + + <!-- Bootstrap core JavaScript + ================================================== --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> + <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> + <script type="text/javascript" src="../jquery.jgrowl.js"></script> + <script type="text/javascript"> + (function($){ + $(function(){ + $.jGrowl.defaults.closerTemplate = '<div class="alert alert-info">Close All</div>'; + + var alertTypes = ['success', 'info', 'warning', 'danger']; + + for (var i=0; i<10; i++) { + setTimeout(function(){ + var alertType = alertTypes[Math.floor(Math.random()*alertTypes.length)]; + + $('#jGrowl-container1').jGrowl({ + header: alertType.substring(0, 1).toUpperCase() + alertType.substring(1) + ' Notification', + message: 'Hello world ', + group: 'alert-' + alertType, + life: 5000 + }); + }, i*2000); + } + }); + })(jQuery); + </script> + </body> +</html> |