Blame | Last modification | View Log | RSS feed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dijit Grid</title>
<script type="text/javascript">
var djConfig = {isDebug: true, debugAtAllCosts: true};
</script>
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "css/dijitTests.css";
</style>
<script type="text/javascript" src="../../dojo/dojo.js"></script>
<script type="text/javascript" src="_testCommon.js"></script>
<style type="text/css">
body{ padding:1em 3em; }
/* The following will end up being added by code. */
.dijitGridColumn1{ width:60px; }
.dijitGridColumn2{ width:100px; }
.dijitGridColumn3{ width:100px; }
.dijitGridColumn4{ width:280px; }
/* End code add */
div.clear { clear:both; }
div.dijitGrid {
width:600px;
border:1px solid #ccc;
margin:1em;
}
table td {
border:1px solid #ccc;
border-collapse:none;
}
div.digitGridRow {
border:1px solid #c00;
clear:both;
}
span.dijitGridCell{
padding:0.25em;
display:block;
float:left;
}
span.dijitGridSeparator{
display:block;
float:left;
width:1px;
border-left:1px solid #ccc;
}
div.dijitGridHead {
background-color:#efefef;
border-bottom:1px solid #ccc;
font-weight:bold;
}
div.dijitGridBody {
height:200px;
overflow:auto;
}
div.dijitGridBodyContent {
overflow:visible;
}
div.dijitGridFoot { }
</style>
</head>
<body>
<h1>Dijit Grid: Table Test</h1>
<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>
<div class="dijitGrid">
<div class="dijitGridHead">
<div class="dijitGridRow">
<span class="dijitGridCell dijitGridColumn1">Name</span>
<span class="dijitGridSeparator"></span>
<span class="dijitGridCell dijitGridColumn2">Date Added</span>
<span class="dijitGridSeparator"></span>
<span class="dijitGridCell dijitGridColumn3">Date Modified</span>
<span class="dijitGridSeparator"></span>
<span class="dijitGridCell dijitGridColumn4">Label</span>
<div class="clear"></div>
</div>
</div>
<div class="dijitGridBody">
<div class="dijitGridBodyContent">
<table cellpadding="0" cellspacing="0" border="0" width="576" style="margin:0;border:0;">
<colgroup>
<col width="60"/>
<col width="100"/>
<col width="100"/>
<col width="280"/>
</colgroup>
<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>
<tr><td>Betty</td><td>6/15/2005</td><td>1/7/2006</td><td>Adipiscing elit, sed diam nonummy nibh euismod</td></tr>
<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>
<tr><td>David</td><td>11/1/2003</td><td>6/15/2005</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
<tr><td>Esther</td><td>1/7/2006</td><td>4/23/2002</td><td>nostrud exerci tation ullamcorper</td></tr>
<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>
<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>
<tr><td>Helga</td><td>4/23/2002</td><td>3/1/2004</td><td>adipiscing elit, sed diam nonummy nibh euismod</td></tr>
<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>
<tr><td>Jane</td><td>1/7/2006</td><td>4/23/2002</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
</table>
</div>
</div>
<div class="dijitGridFoot">
</div>
</div>
<h2>A regular table, for comparison purposes</h2>
<table cellpadding="0" cellspacing="0" border="0" width="600">
<thead>
<tr>
<th width="60" valign="top">Name</th>
<th width="100" align="center" valign="top">Date Added</th>
<th width="100" align="center" valign="top">Date Modified</th>
<th>Label</th>
</tr>
</thead>
<tbody>
<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>
<tr><td>Betty</td><td>6/15/2005</td><td>1/7/2006</td><td>Adipiscing elit, sed diam nonummy nibh euismod</td></tr>
<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>
<tr><td>David</td><td>11/1/2003</td><td>6/15/2005</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
<tr><td>Esther</td><td>1/7/2006</td><td>4/23/2002</td><td>nostrud exerci tation ullamcorper</td></tr>
<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>
<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>
<tr><td>Helga</td><td>4/23/2002</td><td>3/1/2004</td><td>adipiscing elit, sed diam nonummy nibh euismod</td></tr>
<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>
<tr><td>Jane</td><td>1/7/2006</td><td>4/23/2002</td><td>Ut wisi enim ad minim veniam, quis</td></tr>
</tbody>
</table>
</body>
</html>