r2435 - starting points for grid markup / style. Very early stages still.
Author: scottjehl
Date: Thu Apr 2 11:38:30 2009
New Revision: 2435
Added:
branches/dev/grid/tests/static/grid/
branches/dev/grid/tests/static/grid/default.html (contents, props
changed)
branches/dev/grid/tests/static/static.css (contents, props changed)
branches/dev/grid/tests/static/static.js (contents, props changed)
Log:
starting points for grid markup / style. Very early stages still.
Added: branches/dev/grid/tests/static/grid/default.html
==============================================================================
--- (empty file)
+++ branches/dev/grid/tests/static/grid/default.html Thu Apr 2 11:38:30
2009
@@ -0,0 +1,118 @@
+<!doctype html>
+<html>
+<head>
+ <title>Grid Static Test : Default</title>
+ <link rel="stylesheet" href="../static.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.base.css"
type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/ui.theme.css"
type="text/css" title="ui-theme" />
+ <script type="text/javascript" src="../../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../static.js"></script>
+ <style type="text/css">
+
+ /* Grid
+ ----------------------------------*/
+ .ui-grid { width: 500px; padding: .4em; background-image: none; }
+ .ui-grid .ui-grid-content { width: 100%; border-collapse: collapse; }
+ .ui-grid table tbody td, .ui-grid .ui-grid-header, .ui-grid table thead
a { padding: .4em; }
+ .ui-grid table tbody td { text-align: right; font-weight: normal; }
+ .ui-grid .ui-grid-header, .ui-grid .ui-grid-footer { padding: .8em .4em;
text-align: center; }
+ .ui-grid .ui-grid-footer { background-image: none; font-weight: normal;
text-align: left; }
+ .ui-grid table thead a { display: block; }
+ .ui-grid .ui-icon { float: right; }
+ .ui-grid .ui-grid-paging { float: right; }
+ .ui-grid .ui-grid-paging-prev { float: left; width: 16px; height: 16px; }
+ .ui-grid .ui-grid-paging-next { float: right; width: 16px; height: 16px;
}
+ .ui-grid .ui-grid-results { }
+ </style>
+
+ <script type="text/javascript">
+ $(function(){
+ $('tbody tr').hover(
+ function(){ $('td', this).addClass('ui-state-hover');},
+ function(){ $('td', this).removeClass('ui-state-hover');}
+ )
+ .toggle(
+ function(){ $('td', this).addClass('ui-state-highlight');},
+ function(){ $('td', this).removeClass('ui-state-highlight');}
+ );
+ });
+ </script>
+
+</head>
+<body>
+
+
+ <div class="ui-grid ui-widget ui-widget-content ui-corner-all">
+ <div class="ui-grid-header ui-widget-header ui-corner-top">jQuery UI
Grid Header</div>
+ <table class="ui-grid-content ui-widget-content">
+ <thead>
+ <tr>
+ <th class="ui-state-default"><a href="?sortCol=1&asc"><span
class="ui-icon ui-icon-triangle-1-s" title="sort ascending"></span>
First</a></th>
+ <th class="ui-state-default"><a href="?sortCol=2&asc"><span
class="ui-icon ui-icon-triangle-1-s" title="sort ascending"></span>
Second</a></th>
+ <th class="ui-state-default"><a href="?sortCol=3&asc"><span
class="ui-icon ui-icon-triangle-1-s" title="sort ascending"></span>
Third</a></th>
+ <th class="ui-state-default"><a href="?sortCol=4&asc"><span
class="ui-icon ui-icon-triangle-1-s" title="sort ascending"></span>
Fourth</a></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ui-widget-content">0</td>
+ <td class="ui-widget-content">1</td>
+ <td class="ui-widget-content">2</td>
+ <td class="ui-widget-content">3</td>
+ </tr>
+ <tr>
+ <td class="ui-widget-content">342</td>
+ <td class="ui-widget-content">165</td>
+ <td class="ui-widget-content">2</td>
+ <td class="ui-widget-content">331</td>
+ </tr>
+ <tr>
+ <td class="ui-widget-content">0</td>
+ <td class="ui-widget-content">1</td>
+ <td class="ui-widget-content">2</td>
+ <td class="ui-widget-content">3</td>
+ </tr>
+ <tr>
+ <td class="ui-widget-content">342</td>
+ <td class="ui-widget-content">165</td>
+ <td class="ui-widget-content">2</td>
+ <td class="ui-widget-content">331</td>
+ </tr>
+ <tr>
+ <td class="ui-widget-content">0</td>
+ <td class="ui-widget-content">1</td>
+ <td class="ui-widget-content">2</td>
+ <td class="ui-widget-content">3</td>
+ </tr>
+ <tr>
+ <td class="ui-widget-content">342</td>
+ <td class="ui-widget-content">165</td>
+ <td class="ui-widget-content">2</td>
+ <td class="ui-widget-content">331</td>
+ </tr>
+ <tr>
+ <td class="ui-widget-content">0</td>
+ <td class="ui-widget-content">1</td>
+ <td class="ui-widget-content">2</td>
+ <td class="ui-widget-content">3</td>
+ </tr>
+ <tr>
+ <td class="ui-widget-content">342</td>
+ <td class="ui-widget-content">165</td>
+ <td class="ui-widget-content">2</td>
+ <td class="ui-widget-content">331</td>
+ </tr>
+ </tbody>
+ </table>
+ <div class="ui-grid-footer ui-widget-header ui-corner-bottom
ui-helper-clearfix">
+ <div class="ui-grid-paging ui-helper-clearfix">
+ <a href="?results=1" class="ui-grid-paging-prev ui-state-default
ui-corner-left"><span class="ui-icon ui-icon-triangle-1-w" title="previous
set of results"></span></a>
+ <a href="?results=3" class="ui-grid-paging-next ui-state-default
ui-corner-right"><span class="ui-icon ui-icon-triangle-1-e" title="next set
of results"></span></a>
+ </div>
+ <div class="ui-grid-results">Showing results 10-20</div>
+ </div>
+ </div>
+
+
+</body>
+</html>
Added: branches/dev/grid/tests/static/static.css
==============================================================================
--- (empty file)
+++ branches/dev/grid/tests/static/static.css Thu Apr 2 11:38:30 2009
@@ -0,0 +1 @@
+body { font-size: 62.5%; }
Added: branches/dev/grid/tests/static/static.js
==============================================================================
--- (empty file)
+++ branches/dev/grid/tests/static/static.js Thu Apr 2 11:38:30 2009
@@ -0,0 +1,9 @@
+/* static_helpers.js
+ */
+$(function(){
+ //add hover states on the static widgets
+
$('.ui-state-default:not(.ui-state-disabled, .ui-slider-range, .ui-progressbar-value),
a.ui-datepicker-next,
a.ui-datepicker-prev, .ui-dialog-titlebar-close, .ui-autocomplete-item
a').hover(
+ function(){ $(this).addClass('ui-state-hover'); },
+ function(){ $(this).removeClass('ui-state-hover'); }
+ );
+});