Permalink
Browse files

added the files and dependency includes for the "tables" branch. The …

…demo is not yet functional, but includes the assets from @maggiewachs' responsive table (Filament Group). Next steps will be to rewrite this code  to use @toddparker's proposed API, and any other refactoring that makes sense. Addresses #5093
  • Loading branch information...
1 parent b793599 commit 9aa612ff65bcb5fef97cb712666627733400e214 Scott Jehl committed Oct 20, 2012
@@ -22,4 +22,5 @@
@import url( "jquery.mobile.forms.select.css" );
@import url( "jquery.mobile.forms.textinput.css" );
@import url( "jquery.mobile.listview.css" );
-@import url( "jquery.mobile.forms.slider.css" );
+@import url( "jquery.mobile.forms.slider.css" );
+@import url( "jquery.mobile.table.css" );
@@ -0,0 +1,104 @@
+.table-wrapper {
+ position: relative;
+ margin: 5em 0;
+}
+.table-menu-wrapper {
+ position: absolute;
+ top: -3em;
+ right: 0;
+}
+.table-menu {
+ position: absolute;
+ background-color: #fff;
+ padding: 10px;
+ border: 1px solid #ccc;
+ font-size: 1.2em;
+ width: 12em;
+ right: 0;
+ left: auto;
+}
+.table-menu-hidden {
+ left: -999em;
+ right: auto;
+}
+.table-menu-btn {
+ text-decoration: none;
+ color: #333;
+ font-size: 1.2em;
+ background: #eee url(../_img/icon-menu.png) no-repeat 5px center;
+ padding: .3em 10px .3em 20px;
+ border: 1px solid #ccc;
+}
+.table-menu li {
+ padding: .3em 0;
+}
+
+
+
+/* Table styles */
+.table-wrapper table {
+ width: 100%;
+ font-size: 1.2em;
+}
+.table-wrapper thead th {
+ white-space: nowrap;
+ border-bottom: 1px solid #ccc;
+ color: #888;
+}
+.table-wrapper th,
+.table-wrapper td {
+ padding: .5em 1em;
+ background-color: #fff;
+ text-align: right;
+}
+.table-wrapper th:first-child,
+.table-wrapper td:first-child {
+ text-align: left;
+}
+.table-wrapper tbody th,
+.table-wrapper td {
+ border-bottom: 1px solid #e6e6e6;
+}
+.table-wrapper .co-name {
+ display: block;
+ font-size: .9em;
+ opacity: .4;
+}
+
+.enhanced th,
+.enhanced td {
+ display: none;
+}
+
+.legacy-ie .enhanced th.essential,
+.legacy-ie .enhanced td.essential {
+ display: inline;
+}
+.enhanced th.essential,
+.enhanced td.essential {
+ display: table-cell;
+}
+
+
+
+@media screen and (min-width: 50em) {
+ .legacy-ie .table-wrapper th.optional,
+ .legacy-ie .table-wrapper td.optional {
+ display: inline;
+ }
+ .enhanced .table-wrapper th.optional,
+ .enhanced .table-wrapper td.optional {
+ display: table-cell;
+ }
+}
+
+@media screen and (min-width: 65em) {
+ .legacy-ie .table-wrapper th,
+ .legacy-ie .table-wrapper td {
+ display: inline;
+ }
+ .table-wrapper th,
+ .table-wrapper td {
+ display: table-cell;
+ }
+}
View
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>jQuery Mobile Docs - Responsive Table</title>
+ <link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
+ <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
+
+ <script src="../../js/jquery.js"></script>
+ <script src="../../docs/_assets/js/jqm-docs.js"></script>
+ <script src="../../js/"></script>
+
+</head>
+<body>
+
+ <div data-role="page" class="type-interior">
+
+ <div data-role="header" data-theme="f">
+ <h1>Responsive Table</h1>
+ <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
+ <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <div class="content-primary">
+ <h3>Selectively displaying data</h3>
+
+ <p>The number of columns displayed in the table below depends on the available screen space, by default; a smartphone will display 2 columns, for example, while an expanded desktop browser displays the full set. This is accomplished by assigning semantic classes to the column headings that indicate which data values take precedence (essential vs optional), in combination with media queries to display them at different screen widths (a.k.a., <a href="http://www.alistapart.com/articles/responsive-web-design/">responsive design</a>).</p>
+
+ <p>We added a bit of JavaScript logic so you can control which data is displayed by checking column names in the "Display" menu on the right. Once an option is checked, the associated data will persist and display at all screen widths until the option is unchecked.</p>
+
+ <p>You can also set a column to always persist by assigning a class in the markup, in which case it has no menu option. Here, the "Company" column is persistent.</p>
+
+
+
+ <div class="table-wrapper">
+
+ <table cellspacing="0" data-role="table">
+ <thead>
+ <tr>
+ <th class="persist essential">Company</th>
+ <th class="essential">Last Trade</th>
+ <th class="optional">Trade Time</th>
+ <th class="essential">Change</th>
+ <th class="optional">Prev Close</th>
+ <th class="optional">Open</th>
+ <th>Bid</th>
+ <th>Ask</th>
+ <th>1y Target Est</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th>GOOG <span class="co-name">Google Inc.</span></th>
+ <td>597.74</td>
+ <td>12:12PM</td>
+ <td>14.81 (2.54%)</td>
+ <td>582.93</td>
+ <td>597.95</td>
+ <td>597.73 x 100</td>
+ <td>597.91 x 300</td>
+ <td>731.10</td>
+ </tr>
+ <tr>
+ <th>AAPL <span class="co-name">Apple Inc.</span></th>
+ <td>378.94</td>
+ <td>12:22PM</td>
+ <td>5.74 (1.54%)</td>
+ <td>373.20</td>
+ <td>381.02</td>
+ <td>378.92 x 300</td>
+ <td>378.99 x 100</td>
+ <td>505.94</td>
+ </tr>
+ <tr>
+ <th>AMZN <span class="co-name">Amazon.com Inc.</span></th>
+ <td>191.55</td>
+ <td>12:23PM</td>
+ <td>3.16 (1.68%)</td>
+ <td>188.39</td>
+ <td>194.99</td>
+ <td>191.52 x 300</td>
+ <td>191.58 x 100</td>
+ <td>240.32</td>
+ </tr>
+ <tr>
+ <th>ORCL <span class="co-name">Oracle Corporation</span></th>
+ <td>31.15</td>
+ <td>12:44PM</td>
+ <td>1.41 (4.72%)</td>
+ <td>29.74</td>
+ <td>30.67</td>
+ <td>31.14 x 6500</td>
+ <td>31.15 x 3200</td>
+ <td>36.11</td>
+ </tr>
+ <tr>
+ <th>MSFT <span class="co-name">Microsoft Corporation</span></th>
+ <td>25.50</td>
+ <td>12:27PM</td>
+ <td>0.66 (2.67%)</td>
+ <td>24.84</td>
+ <td>25.37</td>
+ <td>25.50 x 71100</td>
+ <td>25.51 x 17800</td>
+ <td>31.50</td>
+ </tr>
+ <tr>
+ <th>CSCO <span class="co-name">Cisco Systems, Inc.</span></th>
+ <td>18.65</td>
+ <td>12:45PM</td>
+ <td>0.97 (5.49%)</td>
+ <td>17.68</td>
+ <td>18.23</td>
+ <td>18.65 x 10300</td>
+ <td>18.66 x 24000</td>
+ <td>21.12</td>
+ </tr>
+ <tr>
+ <th>YHOO <span class="co-name">Yahoo! Inc.</span></th>
+ <td>15.81</td>
+ <td>12:25PM</td>
+ <td>0.11 (0.67%)</td>
+ <td>15.70</td>
+ <td>15.94</td>
+ <td>15.79 x 6100</td>
+ <td>15.80 x 17000</td>
+ <td>18.16</td>
+ </tr>
+ </tbody>
+ </table>
+
+ </div><!-- /table-wrapper -->
+ </div>
+ <!--/content-primary -->
+
+ <div class="content-secondary">
+
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+
+ <h3>In this section</h3>
+
+ <ul data-role="listview" data-theme="c" data-dividertheme="d">
+
+ <li><a href="index.html">Responsive Table</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" class="footer-docs" data-theme="c">
+ <p class="jqm-version"></p>
+ <p>&copy; 2012 jQuery Foundation and other contributors</p>
+ </div>
+
+ </div><!-- /page -->
+
+</body>
+</html>
+
+
+
+
+
+
View
@@ -49,6 +49,7 @@ <h1 id="jqm-logo"><img src="docs/_assets/images/jquery-logo.png" alt="jQuery Mob
<li><a href="docs/content/index.html">Content formatting</a></li>
<li><a href="docs/forms/index.html">Form elements</a></li>
<li><a href="docs/lists/index.html">Listviews</a></li>
+ <li><a href="docs/tables/index.html">Tables</a></li>
<li data-role="list-divider">API</li>
<li><a href="docs/api/globalconfig.html">Configuring defaults</a></li>
View
@@ -53,6 +53,7 @@
'jquery.mobile.links.js',
'widgets/fixedToolbar.js',
'widgets/popup.js',
+ 'widgets/table.js',
'jquery.mobile.zoom.js',
'jquery.mobile.zoom.iosorientationfix.js',
'jquery.mobile.init.js'
View
@@ -30,6 +30,7 @@ define([
'./jquery.mobile.links',
'./widgets/fixedToolbar',
'./widgets/popup',
+ './widgets/table',
'./jquery.mobile.zoom',
'./jquery.mobile.zoom.iosorientationfix'
], function( require ) {
Oops, something went wrong.

0 comments on commit 9aa612f

Please sign in to comment.