Skip to content

Commit 2fa3282

Browse files
jaspermdegrootjaspermdegroot
committed
reorder docs persistent toolbars pages
1 parent 1fcdf9c commit 2fa3282

File tree

4 files changed

+270
-270
lines changed

4 files changed

+270
-270
lines changed

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

Lines changed: 56 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -13,102 +13,80 @@
1313

1414
</head>
1515
<body>
16-
1716
<div data-role="page" class="type-interior">
1817

19-
<div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
20-
<h1>Friends</h1>
18+
<div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
19+
<h1>Info</h1>
2120
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
2221
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
2322
</div>
2423

2524
<div data-role="content">
2625
<div class="content-primary">
27-
28-
29-
<ul data-role="listview" data-theme="d" data-dividertheme="e" data-filter="true" data-filter-theme="d"data-filter-placeholder="Search friends...">
30-
<li data-role="list-divider">A</li>
31-
<li><a href="#">Adam Kinkaid</a></li>
32-
<li><a href="#">Alex Wickerham</a></li>
33-
<li><a href="#">Avery Johnson</a></li>
34-
<li data-role="list-divider">B</li>
35-
<li><a href="#">Bob Cabot</a></li>
36-
<li data-role="list-divider">C</li>
37-
<li><a href="#">Caleb Booth</a></li>
38-
<li><a href="#">Christopher Adams</a></li>
39-
<li><a href="#">Culver James</a></li>
40-
<li data-role="list-divider">D</li>
41-
<li><a href="#">David Walsh</a></li>
42-
<li><a href="#">Drake Alfred</a></li>
43-
<li data-role="list-divider">E</li>
44-
<li><a href="#">Elizabeth Bacon</a></li>
45-
<li><a href="#">Emery Parker</a></li>
46-
<li><a href="#">Enid Voldon</a></li>
47-
<li data-role="list-divider">F</li>
48-
<li><a href="#">Francis Wall</a></li>
49-
<li data-role="list-divider">G</li>
50-
<li><a href="#">Graham Smith</a></li>
51-
<li><a href="#">Greta Peete</a></li>
52-
<li data-role="list-divider">H</li>
53-
<li><a href="#">Harvey Walls</a></li>
54-
<li data-role="list-divider">M</li>
55-
<li><a href="#">Mike Farnsworth</a></li>
56-
<li><a href="#">Murray Vanderbuilt</a></li>
57-
<li data-role="list-divider">N</li>
58-
<li><a href="#">Nathan Williams</a></li>
59-
<li data-role="list-divider">P</li>
60-
<li><a href="#">Paul Baker</a></li>
61-
<li><a href="#">Pete Mason</a></li>
62-
<li data-role="list-divider">R</li>
63-
<li><a href="#">Rod Tarker</a></li>
64-
<li data-role="list-divider">S</li>
65-
<li><a href="#">Sawyer Wakefield</a></li>
66-
</ul>
26+
<h2>About persistent toolbars</h2>
27+
<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 both, the persistent header and footer on these pages, remains in place during the animation to a new HTML page.</p>
28+
<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>
29+
30+
<p>Typically, the persistent toolbar technique will be combined with fixed positioning. In this example, the footer also has a navbar, like this:</p>
6731

68-
69-
70-
71-
72-
73-
74-
32+
<pre><code>
33+
&lt;div data-role=&quot;footer&quot;<strong> data-id=&quot;foo1&quot; data-position=&quot;fixed&quot;</strong>&gt;
34+
&lt;div data-role=&quot;navbar&quot;&gt;
35+
&lt;ul&gt;
36+
&lt;li&gt;&lt;a href=&quot;d.html&quot;&gt;Info&lt;/a&gt;&lt;/li&gt;
37+
&lt;li&gt;&lt;a href=&quot;a.html&quot;&gt;Friends&lt;/a&gt;&lt;/li&gt;
38+
&lt;li&gt;&lt;a href=&quot;b.html&quot;&gt;Albums&lt;/a&gt;&lt;/li&gt;
39+
&lt;li&gt;&lt;a href=&quot;c.html&quot;&gt;Emails&lt;/a&gt;&lt;/li&gt;
40+
&lt;/ul&gt;
41+
&lt;/div&gt;&lt;!-- /navbar --&gt;
42+
&lt;/div&gt;&lt;!-- /footer --&gt;
43+
</code></pre>
44+
<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>
45+
46+
<pre><code>
47+
&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;
48+
</code></pre>
49+
50+
<h3>A note about transitions</h3>
51+
<p>The slide, slideup, slidedown, fade or none <a href="../pages/page-transitions.html">page transitions</a> all work great with persistent fixed toolbars. However, intensive 3D transitions like flip, turn, and flow can cause positioning and animation performance issues with this technique so we don't recommend using them.</p>
52+
7553
</div><!--/content-primary -->
7654

7755
<div class="content-secondary">
7856

79-
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
57+
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
8058

81-
<h3>More in this section</h3>
59+
<h3>More in this section</h3>
8260

83-
<ul data-role="listview" data-theme="c" data-dividertheme="d">
61+
<ul data-role="listview" data-theme="c" data-dividertheme="d">
8462

85-
<li data-role="list-divider">Toolbars</li>
86-
<li><a href="docs-bars.html">Toolbar basics</a></li>
87-
<li><a href="docs-headers.html">Header bars</a></li>
88-
<li><a href="docs-footers.html">Footer bars</a></li>
89-
<li><a href="docs-navbar.html">Navbars</a></li>
90-
<li><a href="bars-fixed.html">Fixed positioning</a></li>
91-
<li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
92-
<li><a href="bars-themes.html">Theming toolbars</a></li>
63+
<li data-role="list-divider">Toolbars</li>
64+
<li><a href="docs-bars.html">Toolbar basics</a></li>
65+
<li><a href="docs-headers.html">Header bars</a></li>
66+
<li><a href="docs-footers.html">Footer bars</a></li>
67+
<li><a href="docs-navbar.html">Navbars</a></li>
68+
<li><a href="bars-fixed.html">Fixed positioning</a></li>
69+
<li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
70+
<li><a href="bars-themes.html">Theming toolbars</a></li>
9371

94-
</ul>
95-
</div>
96-
</div>
72+
</ul>
73+
</div>
74+
</div>
9775

98-
</div><!-- /content -->
76+
</div><!-- /content -->
9977

100-
<div data-role="footer" data-id="foo1" data-position="fixed">
101-
<div data-role="navbar">
102-
<ul>
103-
<li><a href="footer-persist-a.html" data-prefetch="true" class="ui-btn-active ui-state-persist">Friends</a></li>
104-
<li><a href="footer-persist-b.html" data-prefetch="true">Albums</a></li>
105-
<li><a href="footer-persist-c.html" data-prefetch="true">Emails</a></li>
106-
<li><a href="footer-persist-d.html" data-prefetch="true" data-transition="slideup">Info</a></li>
107-
</ul>
108-
</div><!-- /navbar -->
109-
</div><!-- /footer -->
78+
<div data-role="footer" data-id="foo1" data-position="fixed">
79+
<div data-role="navbar">
80+
<ul>
81+
<li><a href="footer-persist-a.html" data-prefetch="true" data-transition="slideup" class="ui-btn-active ui-state-persist">Info</a></li>
82+
<li><a href="footer-persist-b.html" data-prefetch="true">Friends</a></li>
83+
<li><a href="footer-persist-c.html" data-prefetch="true">Albums</a></li>
84+
<li><a href="footer-persist-d.html" data-prefetch="true">Emails</a></li>
85+
</ul>
86+
</div><!-- /navbar -->
87+
</div><!-- /footer -->
11088

111-
</div><!-- /page -->
89+
</div><!-- /page -->
11290

113-
</body>
114-
</html>
91+
</body>
92+
</html>

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

Lines changed: 85 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -17,124 +17,98 @@
1717
<div data-role="page" class="type-interior">
1818

1919
<div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
20-
<h1>Albums</h1>
20+
<h1>Friends</h1>
2121
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
2222
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
2323
</div>
2424

2525
<div data-role="content">
2626
<div class="content-primary">
27-
<ul data-role="listview" data-theme="d" data-dividertheme="e" data-filter="true" data-filter-theme="d" data-filter-placeholder="Search albums..." data-split-icon="gear" data-split-theme="c">
28-
<li><a href="#">
29-
<img src="../lists/images/album-bb.jpg" />
30-
<h3>Broken Bells</h3>
31-
<p>Broken Bells</p>
32-
</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
33-
</a></li>
34-
<li><a href="#">
35-
36-
<img src="../lists/images/album-hc.jpg" />
37-
<h3>Warning</h3>
38-
<p>Hot Chip</p>
39-
40-
</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
41-
</a></li>
42-
<li><a href="#">
43-
<img src="../lists/images/album-p.jpg" />
44-
<h3>Wolfgang Amadeus Phoenix</h3>
45-
<p>Phoenix</p>
46-
</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
47-
</a></li>
48-
<li><a href="#">
49-
<img src="../lists/images/album-ok.jpg" />
50-
<h3>Of The Blue Colour Of The Sky</h3>
51-
<p>Ok Go</p>
52-
</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
53-
</a></li>
54-
<li><a href="#">
55-
<img src="../lists/images/album-ws.jpg" />
56-
<h3>Elephant</h3>
57-
<p>The White Stripes</p>
58-
</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
59-
</a></li>
60-
<li><a href="#">
61-
<img src="../lists/images/album-rh.jpg" />
62-
<h3>Kid A</h3>
63-
<p>Radiohead</p>
64-
</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
65-
</a></li>
66-
<li><a href="#">
67-
<img src="../lists/images/album-xx.jpg" />
68-
<h3>XX</h3>
69-
<p>XX</p>
70-
</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
71-
</a></li>
72-
<li><a href="#">
73-
<img src="../lists/images/album-mg.jpg" />
74-
<h3>Congratulations</h3>
75-
<p>MGMT</p>
76-
</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
77-
</a></li>
78-
<li><a href="#">
79-
<img src="../lists/images/album-ag.jpg" />
80-
<h3>Ashes Grammar</h3>
81-
<p>A Sunny Day in Glasgow</p>
82-
</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
83-
</a></li>
8427

85-
<li><a href="index.html">
86-
<img src="../lists/images/album-k.jpg" />
87-
<h3>Hot Fuss</h3>
88-
<p>Killers</p>
89-
</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
90-
</a></li>
91-
<li><a href="#">
92-
<img src="../lists/images/album-af.jpg" />
93-
<h3>The Suburbs</h3>
94-
<p>Arcade Fire</p>
95-
</a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
96-
</a></li>
97-
</ul>
98-
99-
100-
101-
</div><!--/content-primary -->
102-
103-
<div class="content-secondary">
104-
105-
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
106-
107-
<h3>More in this section</h3>
108-
109-
<ul data-role="listview" data-theme="c" data-dividertheme="d">
110-
111-
<li data-role="list-divider">Toolbars</li>
112-
<li><a href="docs-bars.html">Toolbar basics</a></li>
113-
<li><a href="docs-headers.html">Header bars</a></li>
114-
<li><a href="docs-footers.html">Footer bars</a></li>
115-
<li><a href="docs-navbar.html">Navbars</a></li>
116-
<li><a href="bars-fixed.html">Fixed positioning</a></li>
117-
<li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
118-
<li><a href="bars-themes.html">Theming toolbars</a></li>
119-
120-
</ul>
121-
</div>
122-
</div>
123-
124-
</div><!-- /content -->
125-
126-
<div data-role="footer" data-id="foo1" data-position="fixed">
127-
<div data-role="navbar">
128-
<ul>
129-
<li><a href="footer-persist-a.html" data-prefetch="true">Friends</a></li>
130-
<li><a href="footer-persist-b.html" data-prefetch="true" class="ui-btn-active ui-state-persist">Albums</a></li>
131-
<li><a href="footer-persist-c.html" data-prefetch="true">Emails</a></li>
132-
<li><a href="footer-persist-d.html" data-prefetch="true" data-transition="slideup">Info</a></li>
28+
29+
<ul data-role="listview" data-theme="d" data-dividertheme="e" data-filter="true" data-filter-theme="d"data-filter-placeholder="Search friends...">
30+
<li data-role="list-divider">A</li>
31+
<li><a href="#">Adam Kinkaid</a></li>
32+
<li><a href="#">Alex Wickerham</a></li>
33+
<li><a href="#">Avery Johnson</a></li>
34+
<li data-role="list-divider">B</li>
35+
<li><a href="#">Bob Cabot</a></li>
36+
<li data-role="list-divider">C</li>
37+
<li><a href="#">Caleb Booth</a></li>
38+
<li><a href="#">Christopher Adams</a></li>
39+
<li><a href="#">Culver James</a></li>
40+
<li data-role="list-divider">D</li>
41+
<li><a href="#">David Walsh</a></li>
42+
<li><a href="#">Drake Alfred</a></li>
43+
<li data-role="list-divider">E</li>
44+
<li><a href="#">Elizabeth Bacon</a></li>
45+
<li><a href="#">Emery Parker</a></li>
46+
<li><a href="#">Enid Voldon</a></li>
47+
<li data-role="list-divider">F</li>
48+
<li><a href="#">Francis Wall</a></li>
49+
<li data-role="list-divider">G</li>
50+
<li><a href="#">Graham Smith</a></li>
51+
<li><a href="#">Greta Peete</a></li>
52+
<li data-role="list-divider">H</li>
53+
<li><a href="#">Harvey Walls</a></li>
54+
<li data-role="list-divider">M</li>
55+
<li><a href="#">Mike Farnsworth</a></li>
56+
<li><a href="#">Murray Vanderbuilt</a></li>
57+
<li data-role="list-divider">N</li>
58+
<li><a href="#">Nathan Williams</a></li>
59+
<li data-role="list-divider">P</li>
60+
<li><a href="#">Paul Baker</a></li>
61+
<li><a href="#">Pete Mason</a></li>
62+
<li data-role="list-divider">R</li>
63+
<li><a href="#">Rod Tarker</a></li>
64+
<li data-role="list-divider">S</li>
65+
<li><a href="#">Sawyer Wakefield</a></li>
13366
</ul>
134-
</div><!-- /navbar -->
135-
</div><!-- /footer -->
67+
68+
69+
70+
71+
72+
73+
74+
75+
</div><!--/content-primary -->
76+
77+
<div class="content-secondary">
78+
79+
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
80+
81+
<h3>More in this section</h3>
82+
83+
<ul data-role="listview" data-theme="c" data-dividertheme="d">
84+
85+
<li data-role="list-divider">Toolbars</li>
86+
<li><a href="docs-bars.html">Toolbar basics</a></li>
87+
<li><a href="docs-headers.html">Header bars</a></li>
88+
<li><a href="docs-footers.html">Footer bars</a></li>
89+
<li><a href="docs-navbar.html">Navbars</a></li>
90+
<li><a href="bars-fixed.html">Fixed positioning</a></li>
91+
<li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
92+
<li><a href="bars-themes.html">Theming toolbars</a></li>
93+
94+
</ul>
95+
</div>
96+
</div>
97+
98+
</div><!-- /content -->
99+
100+
<div data-role="footer" data-id="foo1" data-position="fixed">
101+
<div data-role="navbar">
102+
<ul>
103+
<li><a href="footer-persist-a.html" data-prefetch="true" data-transition="slideup">Info</a></li>
104+
<li><a href="footer-persist-b.html" data-prefetch="true" class="ui-btn-active ui-state-persist">Friends</a></li>
105+
<li><a href="footer-persist-c.html" data-prefetch="true">Albums</a></li>
106+
<li><a href="footer-persist-d.html" data-prefetch="true">Emails</a></li>
107+
</ul>
108+
</div><!-- /navbar -->
109+
</div><!-- /footer -->
136110

137-
</div><!-- /page -->
111+
</div><!-- /page -->
138112

139-
</body>
140-
</html>
113+
</body>
114+
</html>

0 commit comments

Comments
 (0)