Skip to content

Commit 14d3f27

Browse files
toddparkertoddparker
committed
Improved documentation for the persistent footers
1 parent 3b17b97 commit 14d3f27

File tree

4 files changed

+91
-5
lines changed

4 files changed

+91
-5
lines changed

‎docs/toolbars/footer-persist-a.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,9 @@ <h1>Friends</h1>
2121

2222
<div data-role="content">
2323
<div class="content-primary">
24-
<p>This page is a demo of a persistent headers and footers. Click on any of the links in the footer, and you'll see the page content transition but the header and footer remain fixed: The footer sticks persistently even when transitioning to a new HTML page, because the footer on all four HTML pages has the same <code>data-id</code> attribute. <strong>Note:</strong> If you'd like an active button in your navbar to remain active when you return to the page displaying this active button, add a class of <code>ui-state-persist</code> in addition to <code>ui-btn-active</code> to the corresponding anchor.</p>
24+
2525

26-
27-
28-
<ul data-role="listview" data-dividertheme="d" style="margin-top: 0;">
26+
<ul data-role="listview" data-theme="d" data-dividertheme="d" style="margin-top: 0;">
2927
<li data-role="list-divider">A</li>
3028
<li><a href="index.html">Adam Kinkaid</a></li>
3129
<li><a href="index.html">Alex Wickerham</a></li>
@@ -102,6 +100,7 @@ <h3>More in this section</h3>
102100
<li><a href="footer-persist-a.html" class="ui-btn-active ui-state-persist">Friends</a></li>
103101
<li><a href="footer-persist-b.html">Albums</a></li>
104102
<li><a href="footer-persist-c.html">Emails</a></li>
103+
<li><a href="footer-persist-d.html">Info</a></li>
105104
</ul>
106105
</div><!-- /navbar -->
107106
</div><!-- /footer -->

‎docs/toolbars/footer-persist-b.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ <h3>More in this section</h3>
126126
<li><a href="footer-persist-a.html">Friends</a></li>
127127
<li><a href="footer-persist-b.html" class="ui-btn-active ui-state-persist">Albums</a></li>
128128
<li><a href="footer-persist-c.html">Emails</a></li>
129+
<li><a href="footer-persist-d.html">Info</a></li>
129130
</ul>
130131
</div><!-- /navbar -->
131132
</div><!-- /footer -->

‎docs/toolbars/footer-persist-c.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ <h1>Inbox</h1>
2121

2222
<div data-role="content">
2323
<div class="content-primary">
24-
<ul data-role="listview">
24+
<ul data-role="listview"data-theme="d" data-dividertheme="d">
2525
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
2626
<li><a href="index.html">
2727

@@ -111,6 +111,7 @@ <h3>More in this section</h3>
111111
<li><a href="footer-persist-a.html">Friends</a></li>
112112
<li><a href="footer-persist-b.html">Albums</a></li>
113113
<li><a href="footer-persist-c.html" class="ui-btn-active ui-state-persist">Emails</a></li>
114+
<li><a href="footer-persist-d.html">Info</a></li>
114115
</ul>
115116
</div><!-- /navbar -->
116117
</div><!-- /footer -->

‎docs/toolbars/footer-persist-d.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html class="ui-mobile-rendering">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Framework - Persistent footer C</title>
7+
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
8+
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
9+
10+
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
11+
<script src="../../js/jquery.js"></script>
12+
</head>
13+
<body>
14+
<div data-role="page" class="type-interior">
15+
16+
<div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
17+
<h1>Friends</h1>
18+
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
19+
</div>
20+
21+
<div data-role="content">
22+
<div class="content-primary">
23+
<h2>Persistent toolbars</h2>
24+
<p>These pages are a demo of persistent toolbars. Click on any of the links in the footer, and you'll see the page content transition but the persistent footer remains in place even when transitioning to a new HTML page.</p>
25+
<p>To tell the framework to apply the persistent behavior, add a <code>data-id</code> attribute to the footer of all HTML pages in the navigation set to the same ID. </p>
26+
<p>Typically, the persistent toolbar technique will be combined with fixed positioning and a navbar, like this:</p>
27+
28+
<pre><code>
29+
&lt;div data-role=&quot;footer&quot;<strong> data-id=&quot;foo1&quot; data-position=&quot;fixed&quot;</strong>&gt;
30+
&lt;div data-role=&quot;navbar&quot;&gt;
31+
&lt;ul&gt;
32+
&lt;li&gt;&lt;a href=&quot;a.html&quot;&gt;Friends&lt;/a&gt;&lt;/li&gt;
33+
&lt;li&gt;&lt;a href=&quot;b.html&quot;&gt;Albums&lt;/a&gt;&lt;/li&gt;
34+
&lt;li&gt;&lt;a href=&quot;c.html&quot;&gt;Emails&lt;/a&gt;&lt;/li&gt;
35+
&lt;li&gt;&lt;a href=&quot;d.html&quot; &gt;Info&lt;/a&gt;&lt;/li&gt;
36+
&lt;/ul&gt;
37+
&lt;/div&gt;&lt;!-- /navbar --&gt;
38+
&lt;/div&gt;&lt;!-- /footer --&gt;
39+
</code></pre>
40+
<p>To set the active state of an item in a persistent toolbar, add a class of <code>ui-state-persist</code> in addition to <code>ui-btn-active</code> to the corresponding anchor.</p>
41+
42+
<pre><code>
43+
&lt;li&gt;&lt;a href=&quot;d.html&quot; <strong>class=&quot;ui-btn-active ui-state-persist&quot;</strong>&gt;Info&lt;/a&gt;&lt;/li&gt;
44+
</code></pre>
45+
46+
</div><!--/content-primary -->
47+
48+
<div class="content-secondary">
49+
50+
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
51+
52+
<h3>More in this section</h3>
53+
54+
<ul data-role="listview" data-theme="c" data-dividertheme="d">
55+
56+
<li data-role="list-divider">Toolbars</li>
57+
<li><a href="docs-bars.html">Toolbar basics</a></li>
58+
<li><a href="docs-headers.html">Header bars</a></li>
59+
<li><a href="docs-footers.html">Footer bars</a></li>
60+
<li><a href="docs-navbar.html">Navbars</a></li>
61+
<li><a href="bars-fixed.html">Fixed positioning</a></li>
62+
<li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
63+
<li><a href="bars-themes.html">Theming toolbars</a></li>
64+
65+
</ul>
66+
</div>
67+
</div>
68+
69+
</div><!-- /content -->
70+
71+
<div data-role="footer" data-id="foo1" data-position="fixed">
72+
<div data-role="navbar">
73+
<ul>
74+
<li><a href="footer-persist-a.html">Friends</a></li>
75+
<li><a href="footer-persist-b.html">Albums</a></li>
76+
<li><a href="footer-persist-c.html">Emails</a></li>
77+
<li><a href="footer-persist-d.html" class="ui-btn-active ui-state-persist">Info</a></li>
78+
</ul>
79+
</div><!-- /navbar -->
80+
</div><!-- /footer -->
81+
82+
</div><!-- /page -->
83+
84+
</body>
85+
</html>

0 commit comments

Comments
 (0)