Skip to content

Commit 8afacfa

Browse files
jaspermdegrootjaspermdegroot
committed
Demos: table demos in new format.
1 parent bf25fe8 commit 8afacfa

File tree

8 files changed

+391
-498
lines changed

8 files changed

+391
-498
lines changed

‎docs/demos/_assets/css/jqm-demos.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@ body, .jqm-demos {
6868
.jqm-demos .jqm-content {
6969
padding: 15px 15%;
7070
}
71+
.jqm-demos .jqm-content.jqm-fullwidth {
72+
padding: 15px;
73+
}
7174
}
7275

7376
/* Headings */

‎docs/demos/demos/index.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,11 @@ <h1>Demos</h1>
3838
<li data-role="list-divider">Popups</li>
3939
<li><a href="popups/dynamic-popup.html" data-ajax="false">Dynamic popup</a></li>
4040
<li data-role="list-divider">Responsive Tables</li>
41-
<li><a href="tables/movie-list.html" data-ajax="false">Reflow: Movie</a></li>
42-
<li><a href="tables/financial-grouped-reflow.html" data-ajax="false">Reflow: Financial w/heading groups</a></li>
43-
<li><a href="tables/movie-list-toggle-options.html" data-ajax="false">Column toggle: Movies</a></li>
44-
<li><a href="tables/phone-compare.html" data-ajax="false">Column toggle: Phone comparison</a></li>
45-
<li><a href="tables/financial-grouped-columns.html" data-ajax="false">Column toggle: Financial w/heading groups</a></li>
41+
<li><a href="tables/movie-list.html" data-ajax="false">Reflow: Custom styles</a></li>
42+
<li><a href="tables/financial-grouped-reflow.html" data-ajax="false">Reflow: Heading groups</a></li>
43+
<li><a href="tables/movie-list-toggle-options.html" data-ajax="false">Column toggle: Customization options</a></li>
44+
<li><a href="tables/financial-grouped-columns.html" data-ajax="false">Column toggle: Heading groups</a></li>
45+
<li><a href="tables/phone-compare.html" data-ajax="false">Column toggle demo: Phone comparison</a></li>
4646
<li data-role="list-divider">Navigation</li>
4747
<li><a href="redirect/index.html" data-ajax="false">Redirection with server-side support</a></li>
4848
<li data-role="list-divider">Swipe</li>

‎docs/demos/demos/tables/financial-grouped-columns.html‎

Lines changed: 91 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,97 @@
1-
<!DOCTYPE html>
1+
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>jQuery Mobile Docs - Responsive Table</title>
7-
<link rel="stylesheet" href="../../../../css/themes/default/jquery.mobile.css">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Table Column toggle: Heading groups - jQuery Mobile Demos</title>
7+
<link rel="stylesheet" href="../../../../css/themes/default/jquery.mobile.css">
88
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
99
<link rel="shortcut icon" href="../../_assets/favicon.ico">
10-
10+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
1111
<script src="../../../../js/jquery.js"></script>
1212
<script src="../../_assets/js/"></script>
1313
<script src="../../../../js/"></script>
14-
15-
<!-- We're using a style block to make it easy to view the custom styles -->
16-
<!-- In production, these should be added to an custom.css file loaded in the head -->
1714
<style>
18-
.th-groups th {
19-
text-align:center;
20-
background-color:rgba(0,0,0,.1);
21-
border-right:1px solid #fff;
22-
}
23-
.th-groups th.totals {
24-
background-color:rgba(0,0,0,.5);
25-
color:#fff;
26-
text-shadow:none;
27-
}
28-
29-
30-
/* Show priority 1 at 320px (20em x 16px) */
31-
@media screen and (min-width: 20em) {
32-
th.ui-table-priority-1,
33-
td.ui-table-priority-1 {
34-
display: table-cell;
35-
}
36-
}
37-
/* Show priority 2 at 480px (30em x 16px) */
38-
@media screen and (min-width: 30em) {
39-
th.ui-table-priority-2,
40-
td.ui-table-priority-2 {
41-
display: table-cell;
42-
}
43-
}
44-
/* Show priority 3 at 640px (40em x 16px) */
45-
@media screen and (min-width: 40em) {
46-
th.ui-table-priority-3,
47-
td.ui-table-priority-3 {
48-
display: table-cell;
49-
}
50-
}
51-
/* Show priority 4 at 800px (50em x 16px) */
52-
@media screen and (min-width: 50em) {
53-
th.ui-table-priority-4,
54-
td.ui-table-priority-4 {
55-
display: table-cell;
56-
}
57-
}
58-
/* Show priority 5 at 960px (60em x 16px) */
59-
@media screen and (min-width: 60em) {
60-
th.ui-table-priority-5,
61-
td.ui-table-priority-5 {
62-
display: table-cell;
63-
}
64-
}
65-
/* Show priority 6 at 1200 (75em x 16px) */
66-
@media screen and (min-width: 75em) {
67-
th.ui-table-priority-6,
68-
td.ui-table-priority-6 {
69-
display: table-cell;
70-
}
71-
}
72-
/* Manually hidden */
73-
th.ui-table-cell-hidden,
74-
td.ui-table-cell-hidden {
75-
display: none;
76-
}
77-
78-
/* Manually shown */
79-
th.ui-table-cell-visible,
80-
td.ui-table-cell-visible {
81-
display: table-cell;
82-
}
15+
.th-groups th {
16+
text-align: center;
17+
background-color: rgba(0,0,0,.1);
18+
border-right: 1px solid #fff;
19+
}
20+
.th-groups th.totals {
21+
background-color: rgba(0,0,0,.5);
22+
color: #fff;
23+
text-shadow: none;
24+
}
25+
/* Show priority 1 at 320px (20em x 16px) */
26+
@media screen and (min-width: 20em) {
27+
th.ui-table-priority-1,
28+
td.ui-table-priority-1 {
29+
display: table-cell;
30+
}
31+
}
32+
/* Show priority 2 at 480px (30em x 16px) */
33+
@media screen and (min-width: 30em) {
34+
th.ui-table-priority-2,
35+
td.ui-table-priority-2 {
36+
display: table-cell;
37+
}
38+
}
39+
/* Show priority 3 at 640px (40em x 16px) */
40+
@media screen and (min-width: 40em) {
41+
th.ui-table-priority-3,
42+
td.ui-table-priority-3 {
43+
display: table-cell;
44+
}
45+
}
46+
/* Show priority 4 at 800px (50em x 16px) */
47+
@media screen and (min-width: 50em) {
48+
th.ui-table-priority-4,
49+
td.ui-table-priority-4 {
50+
display: table-cell;
51+
}
52+
}
53+
/* Show priority 5 at 960px (60em x 16px) */
54+
@media screen and (min-width: 60em) {
55+
th.ui-table-priority-5,
56+
td.ui-table-priority-5 {
57+
display: table-cell;
58+
}
59+
}
60+
/* Show priority 6 at 1200 (75em x 16px) */
61+
@media screen and (min-width: 75em) {
62+
th.ui-table-priority-6,
63+
td.ui-table-priority-6 {
64+
display: table-cell;
65+
}
66+
}
67+
/* Manually hidden */
68+
th.ui-table-cell-hidden,
69+
td.ui-table-cell-hidden {
70+
display: none;
71+
}
72+
/* Manually shown */
73+
th.ui-table-cell-visible,
74+
td.ui-table-cell-visible {
75+
display: table-cell;
76+
}
8377
</style>
8478
</head>
8579
<body>
86-
87-
<div data-role="page">
88-
89-
<div data-role="header" class="jqm-header" data-theme="f">
90-
<h1>Responsive Table</h1>
91-
<a href="../../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
92-
</div><!-- /header -->
93-
94-
<div data-role="content">
95-
<h2>Heading groups</h2>
96-
97-
<h3>Column Toggle example</h3>
98-
<p>The columns of data are shown and toggled as sets under each grouped heading for each financial quarter. In this example, the totals are shown at narrow widths, then more historical quarters are revealed at wider widths by assigning priorities to the columns. </p>
99-
100-
<div data-demo-html="true" data-demo-css="true">
80+
<div data-role="page" class="jqm-demos">
81+
82+
<div data-role="header" class="jqm-header" data-theme="f">
83+
<h1>Responsive Tables</h1>
84+
<a href="#panel-nav" data-icon="bars" data-iconpos="notext">Navigation</a>
85+
<a href="../../" data-icon="home" data-iconpos="notext" data-ajax="false">Home</a>
86+
</div><!-- /header -->
87+
88+
<div data-role="content" class="jqm-content jqm-fullwidth">
89+
90+
<h2>Column toggle: Heading groups</h2>
91+
92+
<p>The columns of data are shown and toggled as sets under each grouped heading for each financial quarter. In this example, the totals are shown at narrow widths, then more historical quarters are revealed at wider widths by assigning priorities to the columns.</p>
93+
94+
<div data-demo-html="true" data-demo-css="true">
10195

10296
<table data-role="table" id="financial-table" data-column-btn-theme="b" data-column-popup-theme="a" data-mode="columntoggle" class="table-stroke">
10397
<thead>
@@ -210,23 +204,15 @@ <h3>Column Toggle example</h3>
210204

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

213-
214-
207+
</div><!-- /content -->
215208

216-
</div><!-- /content -->
209+
<div data-role="footer" class="jqm-footer" data-theme="c">
210+
<p class="jqm-version"></p>
211+
<p>Copyright 2013 The jQuery Foundation</p>
212+
</div><!-- /jqm-footer -->
217213

218-
<div data-role="footer" class="jqm-footer" data-theme="c">
219-
<p class="jqm-version"></p>
220-
<p>Copyright 2013 The jQuery Foundation</p>
221-
</div>
222-
223-
</div><!-- /page -->
214+
<?php include( '../../nav.html' ); ?>
224215

216+
</div><!-- /page -->
225217
</body>
226218
</html>
227-
228-
229-
230-
231-
232-

0 commit comments

Comments
 (0)