304 demos/table-reflow-heading-groups/index.php
View file
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table Reflow: Heading groups - jQuery Mobile Demos</title>
@@ -11,133 +11,203 @@
<script src="../../js/jquery.js"></script>
<script src="../_assets/js/"></script>
<script src="../../js/"></script>
<style>
.th-groups th {
background-color: rgba(0,0,0,0.07);
border-right: 1px solid #fff;
text-align: center;
}
@media screen and (max-width: 72em) {
/* Style the first cell in a row in a dark bar */
.financial-table-reflow th: first-child {
color: #fff;
background-color: #555;
font-size: 1.2em;
padding: .3em .6em .3em .6em;
-webkit-text-shadow: none;
-moz-text-shadow: none;
text-shadow: none;
}
/* Hide the label in the first cell */
.financial-table-reflow th: first-child .ui-table-cell-label {
display: none;
}
/* Make the grouped header labels green */
.ui-table-reflow th .ui-table-cell-label-top,
.ui-table-reflow td .ui-table-cell-label-top {
font-weight: bold;
color: #319B47;
font-size: 1.1em;
}
}
/* Media query to show as a standard table at wider widths, must be very wide for this table */
@media screen and (min-width: 72em) {
/* Show the table header rows */
.financial-table-reflow td,
.financial-table-reflow th,
.financial-table-reflow tbody th,
.financial-table-reflow tbody td,
.financial-table-reflow thead td,
.financial-table-reflow thead th {
display: table-cell;
margin: 0;
}
/* Hide the labels in each cell */
.financial-table-reflow td .ui-table-cell-label,
.financial-table-reflow th .ui-table-cell-label {
display: none;
}
}
/* Hack to make IE9 and WP7.5 treat cells like block level elements */
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/
@media (max-width: 72em) {
.financial-table-reflow td,
.financial-table-reflow th {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
clear: left;
}
}
</style>
</head>
<body>
<div data-role="page" class="jqm-demos">

<div data-role="header" class="jqm-header">
<div data-role="header" class="jqm-header">
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
<p>Demos <span class="jqm-version"></span></p>
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
</div><!-- /header -->
<a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
<a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
</div><!-- /header -->

<div data-role="content" class="jqm-content">

<h1>Grouped column headers</h1>

<p>It's fairly common to need to logically group multiple columns together under a heading group for financial or scientific data. The framework can support the most simple version of this by allowing for two rows of table headers (<code>TH</code>), with the first row containing simple <code>colspan</code> attributes to group the columns below. In this configuration, the framework will add a class to the label of the first cell in each group to allow you to style these differently and provide additional visual hierarchy. </p>

<div data-demo-html="true">
<table data-role="table" id="temp-table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-priority="persist">Paris</th>
<th colspan="2">Average Temperatures (C)</th>
<th colspan="2">Average Rainfall</th>
</tr>
<tr>
<th data-priority="persist">Month</th>
<th data-priority="1">Minimum Temp</th>
<th data-priority="1">Maximum Temp</th>
<th data-priority="2">Precipitaion (mm)</th>
<th data-priority="2">Rainfall Days</th>
</tr>
</thead>
<tbody>
<tr>
<th>Jaunuary</th>
<td>3</td>
<td>8</td>
<td>17.8</td>
<td>10</td>
</tr>
<tr>
<th>February</th>
<td>2</td>
<td>9</td>
<td>21.7</td>
<td>9</td>
</tr>
<tr>
<th>March</th>
<td>4</td>
<td>13</td>
<td>24.2</td>
<td>10</td>
</tr>
<tr>
<th>April</th>
<td>6</td>
<td>15</td>
<td>24.6</td>
<td>11</td>
</tr>
<tr>
<th>May</th>
<td>10</td>
<td>20</td>
<td>26.2</td>
<td>10</td>
</tr>
<tr>
<th>June</th>
<td>13</td>
<td>23</td>
<td>25.1</td>
<td>9</td>
</tr>
<tr>
<th>July</th>
<td>15</td>
<td>25</td>
<td>21.7</td>
<td>7</td>
</tr>
<tr>
<th>August</th>
<td>15</td>
<td>25</td>
<td>21.4</td>
<td>7</td>
</tr>
<tr>
<th>September</th>
<td>11</td>
<td>21</td>
<td>15.6</td>
<td>8</td>
</tr>
<tr>
<th>October</th>
<td>9</td>
<td>17</td>
<td>25.3</td>
<td>11</td>
</tr>
<tr>
<th>November</th>
<td>5</td>
<td>11</td>
<td>22.4</td>
<td>12</td>
</tr>
<tr>
<th>December</th>
<td>3</td>
<td>8</td>
<td>26.6</td>
<td>12</td>
</tr>
</tbody>
</table>
</div><!--/demo-html -->
</div><!-- /content -->

<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
<h1>Table Reflow: Heading groups</h1>

<p>This table will stack the data into label value pairs at narrow widths. The grouped column headings are displayed as subheadings between data sets. The screen needs to be wide before it shows the tabular format so the media query is set to 72em (1,152px). There are custom styles for the first row to set the background to dark gray with white text and hide the label so it looks more like a section divider.</p>

<div data-demo-html="true" data-demo-css="true">

<table data-role="table" id="financial-table-reflow" data-mode="reflow" class="financial-table-reflow table-stroke">
<thead>
<tr class="th-groups">
<th></th>
<th colspan="3">Q1 2012</th>
<th colspan="3">Q2 2012</th>
<th colspan="3">Q3 2012</th>
<th colspan="3">Q4 2012</th>
<th colspan="3" class="totals">YTD Totals</th>
</tr>
<tr>
<th>Store</th>

<th>Income</th>
<th>Profit</th>
<th>Change</th>

<th>Income</th>
<th>Profit</th>
<th>Change</th>

<th>Income</th>
<th>Profit</th>
<th>Change</th>

<th>Income</th>
<th>Profit</th>
<th>Change</th>

<th>Income</th>
<th>Profit</th>
<th>Change</th>
</tr>
</thead>

<tbody>
<tr>
<th>Boston</th>

<td>2,898</td>
<td>739</td>
<td>-5.8%</td>

<td>3,647</td>
<td>1,354</td>
<td>+5.8%</td>

<td>4,981</td>
<td>2,246</td>
<td>+13.4%</td>

<td>3,457</td>
<td>1,259</td>
<td>-3.9%</td>

<td>12,463</td>
<td>6,234</td>
<td>+5.9%</td>
</tr>

<tr>
<th>Chicago</th>

<td>2,898</td>
<td>739</td>
<td>-5.8%</td>

<td>3,647</td>
<td>1,354</td>
<td>+5.8%</td>

<td>4,981</td>
<td>2,246</td>
<td>+13.4%</td>

<td>3,457</td>
<td>1,259</td>
<td>-3.9%</td>

<td>12,463</td>
<td>6,234</td>
<td>+5.9%</td>
</tr>
<tr>
<th>NYC</th>

<td>2,898</td>
<td>739</td>
<td>-5.8%</td>

<td>3,647</td>
<td>1,354</td>
<td>+5.8%</td>

<td>4,981</td>
<td>2,246</td>
<td>+13.4%</td>

<td>3,457</td>
<td>1,259</td>
<td>-3.9%</td>

<td>12,463</td>
<td>6,234</td>
<td>+5.9%</td>
</tr>
</tbody>
</table>

</div><!-- /data-demo -->

</div><!-- /content -->

<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /footer -->
</div><!-- /footer -->

<?php include( '../jqm-panels.php' ); ?>

133 demos/table-reflow/index.php
View file
@@ -116,14 +116,15 @@
</tr>
</tbody>
</table>
</div><!--/demo-html -->
</div><!--/demo-html -->

<h2>Making the table responsive</h2>

<p>By default, a table with reflow mode will display the stacked presentation style on all screen widths. The styles to make the table responsive are added by applying a media query with rules to switch to the tabular style presentation above a specific screen width.</p>
<p>This is done by wrapping a few simple CSS rules in and a media query that only applies the rules above a certain width breakpoint. The styles make the table header rows visible, display the cells in a tabular format, and hide the generated label elements within each. Here is an example media query that swaps the presentation at 40em (640 pixels): </p>
<p>This is done by wrapping a few simple CSS rules in and a media query that only applies the rules above a certain width breakpoint. The styles make the table header rows visible, display the cells in a tabular format, and hide the generated label elements within each. Here is an example media query that swaps the presentation at 40em (640 pixels):</p>

<pre><code><strong>@media ( min-width: 40em ) {</strong>
<pre><code>
<strong>@media ( min-width: 40em ) {</strong>
/* Show the table header rows and set all cells to display: table-cell */
.my-custom-breakpoint td,
.my-custom-breakpoint th,
@@ -145,24 +146,132 @@
<p>It's best to use a <code>class</code> on the table to apply the breakpoint. Add these rules to your custom stylesheet that is included in the <code>head</code> of the page. We recommend creating a set of custom breakpoint classes that can be used to apply standard table breakpoints in your project.</p>

<h2>Choosing a breakpoint</h2>

<p>The goal is to determine the minimum width at which the <em>entire table</em> will fit comfortably within the screen. Find this width by populating a table with realistic sample data, then adjust the browser window until the table completely fits and has a bit of extra space to account for rendering differences across devices. This is the natural place to set the breakpoint that switches between the stacked and tabular presentation modes. The breakpoint width is highly dependent on the number of columns in the table and content within each cell.</p>

<h2>Applying a preset breakpoint</h2>

<p>Even though we strongly encourage you to write custom breakpoints yourself, the framework includes a single pre-configured breakpoint that targets the stacked style to smaller phones and swaps to a tabular prsentation on larger phones, tablet and desktop devices. To use this preset breakpoint, add the <code>ui-responsive</code> class to the table to convert from the stacked presentation to a tabular presentation at 560px (35em). If this breakpoint doesn't work for your content, we encourage you to write a custom breakpoint as descibed above.</p>

<pre><code>&lt;table data-role=&quot;table&quot; <strong>class=&quot;ui-responsive&quot;</strong>&gt;</code></pre>

<p></p>
<pre><code>
&lt;table data-role=&quot;table&quot; <strong>class=&quot;ui-responsive&quot;</strong>&gt;
</code></pre>

<h2>Grouped column headers</h2>
<p>It's fairly common to need to logically group multiple columns together under a heading group for financial or scientific data. The framework can support the most simple version of this by allowing for two rows of table headers (<code>TH</code>), with the first row containing simple <code>colspan</code> attributes to group the columns below. In this configuration, the framework will add a class to the label of the first cell in each group to allow you to style these differently and provide additional visual hierarchy. </p>

<p>It's fairly common to need to logically group multiple columns together under a heading group for financial or scientific data. The framework can support the most simple version of this by allowing for two rows of table headers (<code>TH</code>), with the first row containing simple <code>colspan</code> attributes to group the columns below. In this configuration, the framework will add a class to the label of the first cell in each group to allow you to style these differently and provide additional visual hierarchy.</p>

<div data-demo-html="true">
<table data-role="table" id="temp-table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-priority="persist">Paris</th>
<th colspan="2">Average Temperatures (C)</th>
<th colspan="2">Average Rainfall</th>
</tr>
<tr>
<th data-priority="persist">Month</th>
<th data-priority="1">Minimum Temp</th>
<th data-priority="1">Maximum Temp</th>
<th data-priority="2">Precipitaion (mm)</th>
<th data-priority="2">Rainfall Days</th>
</tr>
</thead>
<tbody>
<tr>
<th>Jaunuary</th>
<td>3</td>
<td>8</td>
<td>17.8</td>
<td>10</td>
</tr>
<tr>
<th>February</th>
<td>2</td>
<td>9</td>
<td>21.7</td>
<td>9</td>
</tr>
<tr>
<th>March</th>
<td>4</td>
<td>13</td>
<td>24.2</td>
<td>10</td>
</tr>
<tr>
<th>April</th>
<td>6</td>
<td>15</td>
<td>24.6</td>
<td>11</td>
</tr>
<tr>
<th>May</th>
<td>10</td>
<td>20</td>
<td>26.2</td>
<td>10</td>
</tr>
<tr>
<th>June</th>
<td>13</td>
<td>23</td>
<td>25.1</td>
<td>9</td>
</tr>
<tr>
<th>July</th>
<td>15</td>
<td>25</td>
<td>21.7</td>
<td>7</td>
</tr>
<tr>
<th>August</th>
<td>15</td>
<td>25</td>
<td>21.4</td>
<td>7</td>
</tr>
<tr>
<th>September</th>
<td>11</td>
<td>21</td>
<td>15.6</td>
<td>8</td>
</tr>
<tr>
<th>October</th>
<td>9</td>
<td>17</td>
<td>25.3</td>
<td>11</td>
</tr>
<tr>
<th>November</th>
<td>5</td>
<td>11</td>
<td>22.4</td>
<td>12</td>
</tr>
<tr>
<th>December</th>
<td>3</td>
<td>8</td>
<td>26.6</td>
<td>12</td>
</tr>
</tbody>
</table>
</div><!--/demo-html -->

</div><!-- /content -->
</div><!-- /content -->

<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /footer -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /footer -->

<?php include( '../jqm-panels.php' ); ?>