basic.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Basic Messager - jQuery EasyUI Demo</title>
  6. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  7. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
  8. <link rel="stylesheet" type="text/css" href="../demo.css">
  9. <script type="text/javascript" src="../../jquery.min.js"></script>
  10. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
  11. </head>
  12. <body>
  13. <h2>Basic Messager</h2>
  14. <div class="demo-info">
  15. <div class="demo-tip icon-tip"></div>
  16. <div>Click on each button to see a distinct message box.</div>
  17. </div>
  18. <div style="margin:10px 0;">
  19. <a href="#" class="easyui-linkbutton" onclick="show()">Show</a>
  20. <a href="#" class="easyui-linkbutton" onclick="slide()">Slide</a>
  21. <a href="#" class="easyui-linkbutton" onclick="fade()">Fade</a>
  22. <a href="#" class="easyui-linkbutton" onclick="progress()">Progress</a>
  23. </div>
  24. <script type="text/javascript">
  25. function show(){
  26. $.messager.show({
  27. title:'My Title',
  28. msg:'Message will be closed after 4 seconds.',
  29. showType:'show'
  30. });
  31. }
  32. function slide(){
  33. $.messager.show({
  34. title:'My Title',
  35. msg:'Message will be closed after 5 seconds.',
  36. timeout:5000,
  37. showType:'slide'
  38. });
  39. }
  40. function fade(){
  41. $.messager.show({
  42. title:'My Title',
  43. msg:'Message never be closed.',
  44. timeout:0,
  45. showType:'fade'
  46. });
  47. }
  48. function progress(){
  49. var win = $.messager.progress({
  50. title:'Please waiting',
  51. msg:'Loading data...'
  52. });
  53. setTimeout(function(){
  54. $.messager.progress('close');
  55. },5000)
  56. }
  57. </script>
  58. </body>
  59. </html>