index.html 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. <!doctype html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>带提示音的jQuery消息提示框插件</title>
  8. <link rel="stylesheet" type="text/css" href="css/normalize.css" />
  9. <link rel="stylesheet" type="text/css" href="css/default.css">
  10. <link rel="stylesheet" type="text/css" href="css/jquery.notify.css">
  11. <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
  12. <!--[if IE]>
  13. <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
  14. <![endif]-->
  15. </head>
  16. <body>
  17. <article class="htmleaf-container">
  18. <button id="btn"><i class="fa fa-commenting-o"></i> 打开消息通知框</button>
  19. </article>
  20. <script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
  21. <script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
  22. <script type="text/javascript" src="js/jquery.notify.js"></script>
  23. <script>
  24. $.notifySetup({sound: 'audio/notify.wav'});
  25. $(function(){
  26. $("#btn").click(function(){
  27. $('<p>Hello World!</p>').notify();
  28. $('<p>Hello World!</p>').notify('error');
  29. $('<p>Hello World!</p>').notify({sticky: true});
  30. });
  31. });
  32. </script>
  33. </body>
  34. </html>