Subversion Repositories Applications.papyrus

Rev

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>