basic.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  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. <p>Click on each button to see a distinct message box.</p>
  15. <div style="margin:20px 0;">
  16. <a href="#" class="easyui-linkbutton" onclick="show()">Show</a>
  17. <a href="#" class="easyui-linkbutton" onclick="slide()">Slide</a>
  18. <a href="#" class="easyui-linkbutton" onclick="fade()">Fade</a>
  19. <a href="#" class="easyui-linkbutton" onclick="progress()">Progress</a>
  20. </div>
  21. <script type="text/javascript">
  22. function show(){
  23. $.messager.show({
  24. title:'My Title',
  25. msg:'Message will be closed after 4 seconds.',
  26. showType:'show'
  27. });
  28. }
  29. function slide(){
  30. $.messager.show({
  31. title:'My Title',
  32. msg:'Message will be closed after 5 seconds.',
  33. timeout:5000,
  34. showType:'slide'
  35. });
  36. }
  37. function fade(){
  38. $.messager.show({
  39. title:'My Title',
  40. msg:'Message never be closed.',
  41. timeout:0,
  42. showType:'fade'
  43. });
  44. }
  45. function progress(){
  46. var win = $.messager.progress({
  47. title:'Please waiting',
  48. msg:'Loading data...'
  49. });
  50. setTimeout(function(){
  51. $.messager.progress('close');
  52. },5000)
  53. }
  54. </script>
  55. </body>
  56. </html>