test_Table.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Dijit Grid</title>
  5. <script type="text/javascript">
  6. var djConfig = {isDebug: true, debugAtAllCosts: true};
  7. </script>
  8. <style type="text/css">
  9. @import "../../dojo/resources/dojo.css";
  10. @import "css/dijitTests.css";
  11. </style>
  12. <script type="text/javascript" src="../../dojo/dojo.js"></script>
  13. <script type="text/javascript" src="_testCommon.js"></script>
  14. <style type="text/css">
  15. body{ padding:1em 3em; }
  16. /* The following will end up being added by code. */
  17. .dijitGridColumn1{ width:60px; }
  18. .dijitGridColumn2{ width:100px; }
  19. .dijitGridColumn3{ width:100px; }
  20. .dijitGridColumn4{ width:280px; }
  21. /* End code add */
  22. div.clear { clear:both; }
  23. div.dijitGrid {
  24. width:600px;
  25. border:1px solid #ccc;
  26. margin:1em;
  27. }
  28. table td {
  29. border:1px solid #ccc;
  30. border-collapse:none;
  31. }
  32. div.digitGridRow {
  33. border:1px solid #c00;
  34. clear:both;
  35. }
  36. span.dijitGridCell{
  37. padding:0.25em;
  38. display:block;
  39. float:left;
  40. }
  41. span.dijitGridSeparator{
  42. display:block;
  43. float:left;
  44. width:1px;
  45. border-left:1px solid #ccc;
  46. }
  47. div.dijitGridHead {
  48. background-color:#efefef;
  49. border-bottom:1px solid #ccc;
  50. font-weight:bold;
  51. }
  52. div.dijitGridBody {
  53. height:200px;
  54. overflow:auto;
  55. }
  56. div.dijitGridBodyContent {
  57. overflow:visible;
  58. }
  59. div.dijitGridFoot { }
  60. </style>
  61. </head>
  62. <body>
  63. <h1>Dijit Grid: Table Test</h1>
  64. <p>This is a pure HTML test, in order to develop the eventual markup structure for the Dijit Grid. It is <strong>not</strong> a working Grid, nor will it be the eventual Grid test.</p>
  65. <div class="dijitGrid">
  66. <div class="dijitGridHead">
  67. <div class="dijitGridRow">
  68. <span class="dijitGridCell dijitGridColumn1">Name</span>
  69. <span class="dijitGridSeparator"></span>
  70. <span class="dijitGridCell dijitGridColumn2">Date Added</span>
  71. <span class="dijitGridSeparator"></span>
  72. <span class="dijitGridCell dijitGridColumn3">Date Modified</span>
  73. <span class="dijitGridSeparator"></span>
  74. <span class="dijitGridCell dijitGridColumn4">Label</span>
  75. <div class="clear"></div>
  76. </div>
  77. </div>
  78. <div class="dijitGridBody">
  79. <div class="dijitGridBodyContent">
  80. <table cellpadding="0" cellspacing="0" border="0" width="576" style="margin:0;border:0;">
  81. <colgroup>
  82. <col width="60"/>
  83. <col width="100"/>
  84. <col width="100"/>
  85. <col width="280"/>
  86. </colgroup>
  87. <tr><td>Adam</td><td>3/1/2004</td><td>11/1/2003</td><td><p><strong>Lorem ipsum</strong> dolor sit amet...</p><div>consectetuer</div></td></tr>
  88. <tr><td>Betty</td><td>6/15/2005</td><td>1/7/2006</td><td>Adipiscing elit, sed diam nonummy nibh euismod</td></tr>
  89. <tr><td>Carla</td><td>4/23/2002</td><td>3/1/2004</td><td>tincidunt ut laoreet dolore magna aliquam erat volutpat.</td></tr>
  90. <tr><td>David</td><td>11/1/2003</td><td>6/15/2005</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
  91. <tr><td>Esther</td><td>1/7/2006</td><td>4/23/2002</td><td>nostrud exerci tation ullamcorper</td></tr>
  92. <tr><td>Fred</td><td>3/1/2004</td><td>11/1/2003</td><td>suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td></tr>
  93. <tr><td>Greg</td><td>6/15/2005</td><td>1/7/2006</td><td><p><strong>Lorem ipsum</strong> dolor sit amet...</p><div>consectetuer</div></td></tr>
  94. <tr><td>Helga</td><td>4/23/2002</td><td>3/1/2004</td><td>adipiscing elit, sed diam nonummy nibh euismod</td></tr>
  95. <tr><td>Ianna</td><td>11/1/2003</td><td>6/15/2005</td><td>tincidunt ut laoreet dolore magna aliquam erat volutpat.</td></tr>
  96. <tr><td>Jane</td><td>1/7/2006</td><td>4/23/2002</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
  97. </table>
  98. </div>
  99. </div>
  100. <div class="dijitGridFoot">
  101. </div>
  102. </div>
  103. <h2>A regular table, for comparison purposes</h2>
  104. <table cellpadding="0" cellspacing="0" border="0" width="600">
  105. <thead>
  106. <tr>
  107. <th width="60" valign="top">Name</th>
  108. <th width="100" align="center" valign="top">Date Added</th>
  109. <th width="100" align="center" valign="top">Date Modified</th>
  110. <th>Label</th>
  111. </tr>
  112. </thead>
  113. <tbody>
  114. <tr><td>Adam</td><td>3/1/2004</td><td>11/1/2003</td><td><p><strong>Lorem ipsum</strong> dolor sit amet...</p><div>consectetuer</div></td></tr>
  115. <tr><td>Betty</td><td>6/15/2005</td><td>1/7/2006</td><td>Adipiscing elit, sed diam nonummy nibh euismod</td></tr>
  116. <tr><td>Carla</td><td>4/23/2002</td><td>3/1/2004</td><td>tincidunt ut laoreet dolore magna aliquam erat volutpat.</td></tr>
  117. <tr><td>David</td><td>11/1/2003</td><td>6/15/2005</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
  118. <tr><td>Esther</td><td>1/7/2006</td><td>4/23/2002</td><td>nostrud exerci tation ullamcorper</td></tr>
  119. <tr><td>Fred</td><td>3/1/2004</td><td>11/1/2003</td><td>suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td></tr>
  120. <tr><td>Greg</td><td>6/15/2005</td><td>1/7/2006</td><td><p><strong>Lorem ipsum</strong> dolor sit amet...</p><div>consectetuer</div></td></tr>
  121. <tr><td>Helga</td><td>4/23/2002</td><td>3/1/2004</td><td>adipiscing elit, sed diam nonummy nibh euismod</td></tr>
  122. <tr><td>Ianna</td><td>11/1/2003</td><td>6/15/2005</td><td>tincidunt ut laoreet dolore magna aliquam erat volutpat.</td></tr>
  123. <tr><td>Jane</td><td>1/7/2006</td><td>4/23/2002</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
  124. </tbody>
  125. </table>
  126. </body>
  127. </html>