basic.html 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Basic EasyLoader - 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="../../easyloader.js"></script>
  11. </head>
  12. <body>
  13. <h2>Basic EasyLoader</h2>
  14. <div class="demo-info">
  15. <div class="demo-tip icon-tip"></div>
  16. <div>Click the buttons below to load components dynamically.</div>
  17. </div>
  18. <div style="margin:10px 0;">
  19. <a href="#" class="easyui-linkbutton" onclick="load1()">Load Calendar</a>
  20. <a href="#" class="easyui-linkbutton" onclick="load2()">Load Dialog</a>
  21. <a href="#" class="easyui-linkbutton" onclick="load3()">Load DataGrid</a>
  22. </div>
  23. <div id="cc"></div>
  24. <div id="dd"></div>
  25. <table id="tt"></table>
  26. <script type="text/javascript" src="../../easyloader.js"></script>
  27. <script>
  28. function load1(){
  29. using('calendar', function(){
  30. $('#cc').calendar({
  31. width:180,
  32. height:180
  33. });
  34. });
  35. }
  36. function load2(){
  37. using(['dialog','messager'], function(){
  38. $('#dd').dialog({
  39. title:'Dialog',
  40. width:300,
  41. height:200
  42. });
  43. $.messager.show({
  44. title:'info',
  45. msg:'dialog created'
  46. });
  47. });
  48. }
  49. function load3(){
  50. using('datagrid', function(){
  51. $('#tt').datagrid({
  52. title:'DataGrid',
  53. width:300,
  54. height:200,
  55. fitColumns:true,
  56. columns:[[
  57. {field:'productid',title:'Product ID',width:100},
  58. {field:'productname',title:'Product Name',width:200}
  59. ]],
  60. data: [
  61. {"productid":"FI-SW-01","productname":"Koi"},
  62. {"productid":"K9-DL-01","productname":"Dalmation"},
  63. {"productid":"RP-SN-01","productname":"Rattlesnake"},
  64. {"productid":"RP-LI-02","productname":"Iguana"},
  65. {"productid":"FL-DSH-01","productname":"Manx"},
  66. {"productid":"FL-DLH-02","productname":"Persian"},
  67. {"productid":"AV-CB-01","productname":"Amazon Parrot"}
  68. ]
  69. });
  70. });
  71. }
  72. </script>
  73. </body>
  74. </html>