Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 79b6df8

Browse files
jaspermdegrootjaspermdegroot
committed
Demos: improvements to fixed toolbar demo pages.
1 parent b757d60 commit 79b6df8

16 files changed

+42
-545
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -353,14 +353,14 @@ h2.jqm-home-widget {
353353
.jqm-demos-index .jqm-content p.jqm-intro {
354354
border: none;
355355
}
356-
.jqm-content ul:not(.ui-listview),
357-
.jqm-content ul:not(.ui-listview) li {
356+
.jqm-content > ul:not(.ui-listview),
357+
.jqm-content > ul:not(.ui-listview) li {
358358
font-family: 'Open Sans', sans-serif;
359359
font-weight: 400;
360360
font-size: 0.95em;
361361
line-height: 1.7;
362362
}
363-
.jqm-content ul:not(.ui-listview) {
363+
.jqm-content > ul:not(.ui-listview) {
364364
margin: 1em 0;
365365
padding-left: 1.3em;
366366
}
@@ -385,7 +385,7 @@ h2.jqm-home-widget {
385385
padding: 15px;
386386
}
387387

388-
.jqm-content p {
388+
.jqm-content > p {
389389
line-height: 1.5;
390390
}
391391
.jqm-demos-home .jqm-content p.jqm-intro {

‎demos/nav-widgets.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
<li data-section="Widgets" data-filtertext="dialogs modal popups"><a href="widgets/dialog/">Dialogs</a></li>
1616

17-
<li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a href="widgets/headers/bars-fixed.php">Fixed toolbars</a></li>
17+
<li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a href="widgets/fixed-toolbars/">Fixed toolbars</a></li>
1818

1919
<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a href="widgets/sliders/switch.php" data-ajax="false">Flip switch toggle</a></li>
2020

@@ -36,7 +36,7 @@
3636

3737
<li data-section="Widgets" data-filtertext="navbars navmenu toolbars links icons footer header"><a href="widgets/navbar/" data-ajax="false">Navbar</a></li>
3838

39-
<li data-section="Widgets" data-filtertext="navbars persistent header footer links navmenu"><a href="widgets/navbar/footer-persist-a.php">Navbar, persistent</a></li>
39+
<li data-section="Widgets" data-filtertext="navbars persistent header footer links navmenu"><a href="widgets/fixed-toolbars/footer-persist-a.php">Navbar, persistent</a></li>
4040

4141
<li data-section="Widgets" data-filtertext="pages single multipage templates ajax nav"><a href="widgets/pages/">Pages</a></li>
4242

demos/widgets/headers/bars-fixed-forms.php renamed to demos/widgets/fixed-toolbars/bars-fixed-forms.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>jQuery Mobile Framework - Fixed Toolbars</title>
6+
<title>Fixed Toolbars - jQuery Mobile Framework</title>
77
<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="../../favicon.ico">

demos/widgets/headers/bars-fullscreen.php renamed to demos/widgets/fixed-toolbars/bars-fullscreen.php

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>jQuery Mobile Framework - Fullscreen Fixed toolbars</title>
6+
<title>Fullscreen Fixed toolbars - jQuery Mobile Framework</title>
77
<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="../../favicon.ico">
@@ -16,31 +16,29 @@
1616
<div data-role="page" class="jqm-demos">
1717

1818
<div data-role="header" data-position="fixed" data-theme="f" data-fullscreen="true">
19-
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
19+
<h1>Fullscreen fixed header</h1>
2020
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
21-
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
22-
<?php include( '../../search.php' ); ?>
2321
</div>
2422

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

27-
<img src="../../_assets/img/photo-run.jpeg" alt="Photo Run">
25+
<p style="margin-top:0;text-align:center;"><img src="../../_assets/img/photo-run.jpeg" alt="Photo Run"></p>
2826

2927
<p class="ui-body">This page demonstrates the "fullscreen" toolbar mode. This toolbar treatment is used in special cases where you want the content to fill the whole screen, and you want the header and footer toolbars to appear and disappear when the page is clicked responsively &mdash; a common scenario for photo, image or video viewers.</p>
3028

3129
<p class="ui-body">To enable this toolbar feature type, you apply the <code>data-fullscreen="true"</code> attribute and the <code>data-position="fixed"</code> attribute to both the header and footer <code>div</code> elements, or whichever you want to be full-screen. </p>
3230

3331
<p class="ui-body">Keep in mind that the toolbars in this mode will sit <strong>over</strong> page content, so not all content will be accessible with the toolbars open, just as shown in this demo.</p>
3432

35-
</div><!-- /content -->
33+
</div><!-- /content -->
3634

37-
<div data-role="footer" data-theme="a" data-position="fixed" data-fullscreen="true">
38-
<h1>Fullscreen Fixed Footer</h1>
39-
</div>
35+
<div data-role="footer" data-theme="a" data-position="fixed" data-fullscreen="true">
36+
<h1>Fullscreen Fixed Footer</h1>
37+
</div>
4038

41-
<?php include( '../../global-nav.php' ); ?>
39+
<?php include( '../../global-nav.php' ); ?>
4240

43-
</div><!-- /page -->
41+
</div><!-- /page -->
4442

45-
</body>
46-
</html>
43+
</body>
44+
</html>

demos/widgets/navbar/footer-persist-a.php renamed to demos/widgets/fixed-toolbars/footer-persist-a.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<div data-role="content" class="jqm-content">
2626

2727
<h1>Persistent navbars <a href="http://api.jquerymobile.com/navbar/" data-ajax="false" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-r" data-iconpos="right" class="jqm-api-link">API</a></h1>
28-
<p>These pages are a demo of a persistent <a href="index.php">navbar</a> in a fixed footer toolbars. Click on any of the links in the footer, and you'll see the page content transition. Both the persistent header and footer on these pages remain in place during the animation to a new HTML page.</p>
28+
<p>These pages are a demo of a persistent <a href="../navbar/">navbar</a> in a fixed footer toolbar. Click on any of the links in the footer, and you'll see the page content transition. Both the persistent header and footer on these pages remain in place during the animation to a new HTML page.</p>
2929
<p>To tell the framework to apply the persistent behavior, add the same <code>data-id</code> attribute to the header and/or footer of all HTML pages in the navigation. It's that simple: If the page you're navigating to has a header or footer with the same <code>data-id</code> as the page you're navigating from, the toolbars will appear fixed outside of the transition. Each of the pages in this demo has a different transition to test out how this works.</p>
3030

3131
<p>Typically, the persistent toolbar technique will be combined with fixed positioning. In this example, the footer also has a navbar, like this:</p>

demos/widgets/navbar/footer-persist-b.php renamed to demos/widgets/fixed-toolbars/footer-persist-b.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<?php include( '../../search.php' ); ?>
2323
</div><!-- /header -->
2424

25-
<div data-role="content" class="jqm-content">
25+
<div data-role="content" class="jqm-content jqm-fullwidth">
2626

2727
<ul data-role="listview" data-theme="d" data-dividertheme="e" data-filter="true" data-filter-theme="d"data-filter-placeholder="Search friends...">
2828
<li data-role="list-divider">A</li>

demos/widgets/navbar/footer-persist-c.php renamed to demos/widgets/fixed-toolbars/footer-persist-c.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<?php include( '../../search.php' ); ?>
2323
</div><!-- /header -->
2424

25-
<div data-role="content" class="jqm-content">
25+
<div data-role="content" class="jqm-content jqm-fullwidth">
2626

2727
<ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="false">
2828
<li><a href="#">

demos/widgets/navbar/footer-persist-d.php renamed to demos/widgets/fixed-toolbars/footer-persist-d.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<?php include( '../../search.php' ); ?>
2323
</div><!-- /header -->
2424

25-
<div data-role="content" class="jqm-content">
25+
<div data-role="content" class="jqm-content jqm-fullwidth">
2626

2727
<ul data-role="listview" data-theme="d" data-dividertheme="e" data-filter="true" data-filter-theme="d" data-filter-placeholder="Search messages...">
2828
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>

demos/widgets/headers/bars-fixed.php renamed to demos/widgets/fixed-toolbars/index.php

Lines changed: 12 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>jQuery Mobile Framework - Fixed Toolbars</title>
6+
<title>Fixed Toolbars - jQuery Mobile Framework</title>
77
<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="../../favicon.ico">
@@ -48,9 +48,10 @@
4848
</code></pre>
4949

5050
<h2>Fullscreen Toolbars</h2>
51+
5152
<p><a href="bars-fullscreen.php">Fullscreen</a> fixed toolbars sit on top of the content at all times when they are visible, and unlike regular fixed toolbars, fullscreen toolbars do not fall back to static positioning when toggled. Instead they disappear from the screen entirely. Fullscreen toolbars are ideal for more immersive interfaces, like a photo viewer that is meant to fill the entire screen with the photo itself and no distractions.</p>
5253

53-
<p>To enable this option on a fixed header or footer, add the <code>data-fullscreen</code> attribute to the element.</p>
54+
<p>To enable this option on a fixed header or footer, add the <code>data-fullscreen</code> attribute to the element.</p>
5455

5556
<pre><code>
5657
&lt;div data-role=&quot;header&quot; data-position=&quot;fixed&quot; data-fullscreen=&quot;true&quot;&gt;
@@ -94,92 +95,20 @@
9495

9596
<p>While we will continue to try to find ways to mitigate these bugs as best we can, we currently advise against implementing fixed toolbars containing complicated user styles and form elements without extensive testing in all versions of Android's native browser.</p>
9697

97-
<div class="ui-body ui-body-e">
9898
<h2>No longer supported: touchOverflowEnabled</h2>
9999

100100
<p>Prior to jQuery Mobile 1.1, true fixed toolbar support was contingent on native browser support for the CSS property <code>overflow-scrolling: touch</code>, which is currently only supported in iOS5. As of version 1.1, jQuery Mobile no longer uses this CSS property at all. We've removed all internal usage of this property in the framework, but we've left it defined globally on the $.mobile object to reduce the risk that its removal will cause trouble with existing applications. This property is flagged for removal, so please update your code to no longer use it. The support test for this property, however, remains defined under <code>$.support</code> and we have no plans to remove that test at this time. </p>
101-
</div>
102-
<hr />
103101

104-
<h3>The rest of the page is just sample content to make the page very long</h3>
105102

106-
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
103+
</div><!-- /content -->
104+
105+
<div data-role="footer" data-theme="f" data-position="fixed">
106+
<h1>Fixed Footer</h1>
107+
</div>
107108

108-
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
109+
<?php include( '../../global-nav.php' ); ?>
109110

110-
<h3>And an inset list</h3>
111+
</div><!-- /page -->
111112

112-
<ul data-role="listview" data-inset="true">
113-
<li><a href="index.html">Inbox <span class="ui-li-count">12</span></a></li>
114-
<li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
115-
<li><a href="index.html">Drafts <span class="ui-li-count">4</span></a></li>
116-
<li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
117-
<li><a href="index.html">Trash <span class="ui-li-count">62</span></a></li>
118-
</ul>
119-
120-
<br />
121-
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
122-
123-
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
124-
125-
<h3>Embedded form</h3>
126-
127-
<form action="#" method="get">
128-
129-
<div data-role="fieldcontain">
130-
<label for="name">Text Input:</label>
131-
<input type="text" name="name" id="name" value="" />
132-
</div>
133-
134-
<div data-role="fieldcontain">
135-
<label for="textarea">Textarea:</label>
136-
<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
137-
</div>
138-
139-
<div data-role="fieldcontain">
140-
<label for="slider2">Flip switch:</label>
141-
<select name="slider2" id="slider2" data-role="slider">
142-
<option value="off">Off</option>
143-
<option value="on">On</option>
144-
</select>
145-
</div>
146-
147-
<div data-role="fieldcontain">
148-
<label for="slider">Slider:</label>
149-
<input type="range" name="slider" id="slider" value="0" min="0" max="100" />
150-
</div>
151-
152-
<div data-role="fieldcontain">
153-
<label for="select-choice-1" class="select">Choose shipping method:</label>
154-
<select name="select-choice-1" id="select-choice-1">
155-
<option value="standard">Standard: 7 day</option>
156-
<option value="rush">Rush: 3 days</option>
157-
<option value="express">Express: next day</option>
158-
<option value="overnight">Overnight</option>
159-
</select>
160-
</div>
161-
162-
<div class="ui-body ui-body-b">
163-
<fieldset class="ui-grid-a">
164-
<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
165-
<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>
166-
</fieldset>
167-
</div>
168-
</form>
169-
170-
<h3>A bit more text</h3>
171-
172-
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
173-
174-
</div><!-- /content -->
175-
176-
<div data-role="footer" data-theme="f" data-position="fixed">
177-
<h1>Fixed Footer</h1>
178-
</div>
179-
180-
<?php include( '../../global-nav.php' ); ?>
181-
182-
</div><!-- /page -->
183-
184-
</body>
185-
</html>
113+
</body>
114+
</html>

‎demos/widgets/footers/footer-persist-a.php‎

Lines changed: 0 additions & 91 deletions
This file was deleted.

0 commit comments

Comments
 (0)