Skip to content

Commit cb875da

Browse files
author
Gabriel Schulhof
committed
Demos: Adding ui-body and ui-bar examples. Fixes jquery-archive#6579 - Document / add demos for ui-bar and ui-body classes
1 parent deaea7b commit cb875da

File tree

2 files changed

+117
-0
lines changed

2 files changed

+117
-0
lines changed

‎demos/body-bar-classes/index.php

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Grouping and dividing content - jQuery Mobile Demos</title>
7+
<link rel="shortcut icon" href="../favicon.ico">
8+
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
9+
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css">
10+
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
11+
<script src="../../js/jquery.js"></script>
12+
<script src="../_assets/js/"></script>
13+
<script src="../../js/"></script>
14+
<style id="combined-heading-and-section">
15+
.custom-corners .ui-bar {
16+
-webkit-border-top-left-radius: inherit;
17+
border-top-left-radius: inherit;
18+
-webkit-border-top-right-radius: inherit;
19+
border-top-right-radius: inherit;
20+
}
21+
.custom-corners .ui-body {
22+
border-top-width: 0;
23+
-webkit-border-bottom-left-radius: inherit;
24+
border-bottom-left-radius: inherit;
25+
-webkit-border-bottom-right-radius: inherit;
26+
border-bottom-right-radius: inherit;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<div data-role="page" class="jqm-demos" data-quicklinks="true">
32+
33+
<div data-role="header" class="jqm-header">
34+
<h2><a href="../" title="jQuery Mobile Demos home"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile"></a></h2>
35+
<p><span class="jqm-version"></span> Demos</p>
36+
<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>
37+
<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>
38+
</div><!-- /header -->
39+
40+
<div role="main" class="ui-content jqm-content">
41+
42+
<h1>Grouping and dividing content</h1>
43+
44+
<p>jQuery Mobile provides classes <code>ui-bar</code> and <code>ui-body</code> for subdividing and for visually grouping content.</p>
45+
<p>Add class <code>ui-bar</code> to create a full-width heading or a separator between sections of content. Additionally, classes <code>ui-bar-[a-z]</code> add the appropriate swatch from your theme.</p>
46+
<p>Add class <code>ui-body</code> to visual group and/or emphasize a section of content. Additionally, classes <code>ui-body-[a-z]</code> add the appropriate swatch from your theme.</p>
47+
48+
<h2>Heading and accompanying section</h2>
49+
50+
<div data-demo-html="true">
51+
<h3 class="ui-bar ui-bar-a">Heading</h3>
52+
<div class="ui-body">
53+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
54+
</div>
55+
</div>
56+
57+
<h2>Heading with rounded corners and accompanying section</h2>
58+
59+
<div data-demo-html="true">
60+
<h3 class="ui-bar ui-bar-a ui-corner-all">Heading</h3>
61+
<div class="ui-body">
62+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
63+
</div>
64+
</div>
65+
66+
<h2>Heading with rounded corners accompanying themed section with rounded corners</h2>
67+
68+
<div data-demo-html="true">
69+
<h3 class="ui-bar ui-bar-a ui-corner-all">Heading</h3>
70+
<div class="ui-body ui-body-a ui-corner-all">
71+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
72+
</div>
73+
</div>
74+
75+
<h2>Combined heading and accompanying themed section with rounded corners</h2>
76+
77+
<div data-demo-html="true">
78+
<div class="ui-body ui-body-a ui-corner-all">
79+
<h3>Heading</h3>
80+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
81+
</div>
82+
</div>
83+
84+
<h2>Heading attached to section - custom rounded corners</h2>
85+
86+
<div data-demo-html="true" data-demo-css="#combined-heading-and-section">
87+
<div class="ui-corner-all custom-corners">
88+
<div class="ui-bar ui-bar-a">
89+
<h3>Heading</h3>
90+
</div>
91+
<div class="ui-body ui-body-a">
92+
<p>Content</p>
93+
</div>
94+
</div>
95+
</div>
96+
97+
</div><!-- /content -->
98+
99+
<?php include( '../jqm-navmenu.php' ); ?>
100+
101+
<div data-role="footer" data-position="fixed" data-tap-toggle="false" class="jqm-footer">
102+
<p>jQuery Mobile Demos version <span class="jqm-version"></span></p>
103+
<p>Copyright 2013 The jQuery Foundation</p>
104+
</div><!-- /footer -->
105+
106+
<?php include( '../jqm-search.php' ); ?>
107+
108+
</div><!-- /page -->
109+
110+
</body>
111+
</html>

‎demos/jqm-contents.php

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,12 @@
161161
<li data-filtertext="custom responsive grids rwd"><a href="../grids-custom-responsive/" data-ajax="false">Custom responsive grids</a></li>
162162
</ul>
163163
</li>
164+
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
165+
<h3>Grouping content</h3>
166+
<ul>
167+
<li data-filtertext="blocks content formatting sections heading"><a href="../body-bar-classes/" data-ajax="false">Grouping and dividing content</a></li>
168+
</ul>
169+
</li>
164170
<li data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false">
165171
<h3>3rd party API</h3>
166172
<ul>

0 commit comments

Comments
 (0)