Permalink
Browse files

reorder docs persistent toolbars pages

  • Loading branch information...
1 parent 1fcdf9c commit 2fa32823ecfd9a31fe2232c4e92676acfeca0059 @jaspermdegroot jaspermdegroot committed May 27, 2012
@@ -13,102 +13,80 @@
</head>
<body>
-
<div data-role="page" class="type-interior">
- <div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
- <h1>Friends</h1>
+ <div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
+ <h1>Info</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div>
<div data-role="content">
<div class="content-primary">
-
-
- <ul data-role="listview" data-theme="d" data-dividertheme="e" data-filter="true" data-filter-theme="d"data-filter-placeholder="Search friends...">
- <li data-role="list-divider">A</li>
- <li><a href="#">Adam Kinkaid</a></li>
- <li><a href="#">Alex Wickerham</a></li>
- <li><a href="#">Avery Johnson</a></li>
- <li data-role="list-divider">B</li>
- <li><a href="#">Bob Cabot</a></li>
- <li data-role="list-divider">C</li>
- <li><a href="#">Caleb Booth</a></li>
- <li><a href="#">Christopher Adams</a></li>
- <li><a href="#">Culver James</a></li>
- <li data-role="list-divider">D</li>
- <li><a href="#">David Walsh</a></li>
- <li><a href="#">Drake Alfred</a></li>
- <li data-role="list-divider">E</li>
- <li><a href="#">Elizabeth Bacon</a></li>
- <li><a href="#">Emery Parker</a></li>
- <li><a href="#">Enid Voldon</a></li>
- <li data-role="list-divider">F</li>
- <li><a href="#">Francis Wall</a></li>
- <li data-role="list-divider">G</li>
- <li><a href="#">Graham Smith</a></li>
- <li><a href="#">Greta Peete</a></li>
- <li data-role="list-divider">H</li>
- <li><a href="#">Harvey Walls</a></li>
- <li data-role="list-divider">M</li>
- <li><a href="#">Mike Farnsworth</a></li>
- <li><a href="#">Murray Vanderbuilt</a></li>
- <li data-role="list-divider">N</li>
- <li><a href="#">Nathan Williams</a></li>
- <li data-role="list-divider">P</li>
- <li><a href="#">Paul Baker</a></li>
- <li><a href="#">Pete Mason</a></li>
- <li data-role="list-divider">R</li>
- <li><a href="#">Rod Tarker</a></li>
- <li data-role="list-divider">S</li>
- <li><a href="#">Sawyer Wakefield</a></li>
- </ul>
+ <h2>About persistent toolbars</h2>
+ <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>
+ <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>
+
+ <p>Typically, the persistent toolbar technique will be combined with fixed positioning. In this example, the footer also has a navbar, like this:</p>
-
-
-
-
-
-
-
+<pre><code>
+&lt;div data-role=&quot;footer&quot;<strong> data-id=&quot;foo1&quot; data-position=&quot;fixed&quot;</strong>&gt;
+ &lt;div data-role=&quot;navbar&quot;&gt;
+ &lt;ul&gt;
+ &lt;li&gt;&lt;a href=&quot;d.html&quot;&gt;Info&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;a href=&quot;a.html&quot;&gt;Friends&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;a href=&quot;b.html&quot;&gt;Albums&lt;/a&gt;&lt;/li&gt;
+ &lt;li&gt;&lt;a href=&quot;c.html&quot;&gt;Emails&lt;/a&gt;&lt;/li&gt;
+ &lt;/ul&gt;
+ &lt;/div&gt;&lt;!-- /navbar --&gt;
+&lt;/div&gt;&lt;!-- /footer --&gt;
+</code></pre>
+ <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>
+
+<pre><code>
+&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;
+</code></pre>
+
+ <h3>A note about transitions</h3>
+ <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>
+
</div><!--/content-primary -->
<div class="content-secondary">
- <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
- <h3>More in this section</h3>
+ <h3>More in this section</h3>
- <ul data-role="listview" data-theme="c" data-dividertheme="d">
+ <ul data-role="listview" data-theme="c" data-dividertheme="d">
- <li data-role="list-divider">Toolbars</li>
- <li><a href="docs-bars.html">Toolbar basics</a></li>
- <li><a href="docs-headers.html">Header bars</a></li>
- <li><a href="docs-footers.html">Footer bars</a></li>
- <li><a href="docs-navbar.html">Navbars</a></li>
- <li><a href="bars-fixed.html">Fixed positioning</a></li>
- <li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
- <li><a href="bars-themes.html">Theming toolbars</a></li>
+ <li data-role="list-divider">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
- </ul>
- </div>
- </div>
+ </ul>
+ </div>
+ </div>
- </div><!-- /content -->
+ </div><!-- /content -->
- <div data-role="footer" data-id="foo1" data-position="fixed">
- <div data-role="navbar">
- <ul>
- <li><a href="footer-persist-a.html" data-prefetch="true" class="ui-btn-active ui-state-persist">Friends</a></li>
- <li><a href="footer-persist-b.html" data-prefetch="true">Albums</a></li>
- <li><a href="footer-persist-c.html" data-prefetch="true">Emails</a></li>
- <li><a href="footer-persist-d.html" data-prefetch="true" data-transition="slideup">Info</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /footer -->
+ <div data-role="footer" data-id="foo1" data-position="fixed">
+ <div data-role="navbar">
+ <ul>
+ <li><a href="footer-persist-a.html" data-prefetch="true" data-transition="slideup" class="ui-btn-active ui-state-persist">Info</a></li>
+ <li><a href="footer-persist-b.html" data-prefetch="true">Friends</a></li>
+ <li><a href="footer-persist-c.html" data-prefetch="true">Albums</a></li>
+ <li><a href="footer-persist-d.html" data-prefetch="true">Emails</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div><!-- /footer -->
- </div><!-- /page -->
+ </div><!-- /page -->
- </body>
- </html>
+ </body>
+ </html>
@@ -17,124 +17,98 @@
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f" data-position="fixed" data-id="foo">
- <h1>Albums</h1>
+ <h1>Friends</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div>
<div data-role="content">
<div class="content-primary">
- <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">
- <li><a href="#">
- <img src="../lists/images/album-bb.jpg" />
- <h3>Broken Bells</h3>
- <p>Broken Bells</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="#">
-
- <img src="../lists/images/album-hc.jpg" />
- <h3>Warning</h3>
- <p>Hot Chip</p>
-
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="#">
- <img src="../lists/images/album-p.jpg" />
- <h3>Wolfgang Amadeus Phoenix</h3>
- <p>Phoenix</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="#">
- <img src="../lists/images/album-ok.jpg" />
- <h3>Of The Blue Colour Of The Sky</h3>
- <p>Ok Go</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="#">
- <img src="../lists/images/album-ws.jpg" />
- <h3>Elephant</h3>
- <p>The White Stripes</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="#">
- <img src="../lists/images/album-rh.jpg" />
- <h3>Kid A</h3>
- <p>Radiohead</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="#">
- <img src="../lists/images/album-xx.jpg" />
- <h3>XX</h3>
- <p>XX</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="#">
- <img src="../lists/images/album-mg.jpg" />
- <h3>Congratulations</h3>
- <p>MGMT</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="#">
- <img src="../lists/images/album-ag.jpg" />
- <h3>Ashes Grammar</h3>
- <p>A Sunny Day in Glasgow</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="index.html">
- <img src="../lists/images/album-k.jpg" />
- <h3>Hot Fuss</h3>
- <p>Killers</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- <li><a href="#">
- <img src="../lists/images/album-af.jpg" />
- <h3>The Suburbs</h3>
- <p>Arcade Fire</p>
- </a><a href="../lists/lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
- </a></li>
- </ul>
-
-
-
- </div><!--/content-primary -->
-
- <div class="content-secondary">
-
- <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
-
- <h3>More in this section</h3>
-
- <ul data-role="listview" data-theme="c" data-dividertheme="d">
-
- <li data-role="list-divider">Toolbars</li>
- <li><a href="docs-bars.html">Toolbar basics</a></li>
- <li><a href="docs-headers.html">Header bars</a></li>
- <li><a href="docs-footers.html">Footer bars</a></li>
- <li><a href="docs-navbar.html">Navbars</a></li>
- <li><a href="bars-fixed.html">Fixed positioning</a></li>
- <li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
- <li><a href="bars-themes.html">Theming toolbars</a></li>
-
- </ul>
- </div>
- </div>
-
- </div><!-- /content -->
-
- <div data-role="footer" data-id="foo1" data-position="fixed">
- <div data-role="navbar">
- <ul>
- <li><a href="footer-persist-a.html" data-prefetch="true">Friends</a></li>
- <li><a href="footer-persist-b.html" data-prefetch="true" class="ui-btn-active ui-state-persist">Albums</a></li>
- <li><a href="footer-persist-c.html" data-prefetch="true">Emails</a></li>
- <li><a href="footer-persist-d.html" data-prefetch="true" data-transition="slideup">Info</a></li>
+
+ <ul data-role="listview" data-theme="d" data-dividertheme="e" data-filter="true" data-filter-theme="d"data-filter-placeholder="Search friends...">
+ <li data-role="list-divider">A</li>
+ <li><a href="#">Adam Kinkaid</a></li>
+ <li><a href="#">Alex Wickerham</a></li>
+ <li><a href="#">Avery Johnson</a></li>
+ <li data-role="list-divider">B</li>
+ <li><a href="#">Bob Cabot</a></li>
+ <li data-role="list-divider">C</li>
+ <li><a href="#">Caleb Booth</a></li>
+ <li><a href="#">Christopher Adams</a></li>
+ <li><a href="#">Culver James</a></li>
+ <li data-role="list-divider">D</li>
+ <li><a href="#">David Walsh</a></li>
+ <li><a href="#">Drake Alfred</a></li>
+ <li data-role="list-divider">E</li>
+ <li><a href="#">Elizabeth Bacon</a></li>
+ <li><a href="#">Emery Parker</a></li>
+ <li><a href="#">Enid Voldon</a></li>
+ <li data-role="list-divider">F</li>
+ <li><a href="#">Francis Wall</a></li>
+ <li data-role="list-divider">G</li>
+ <li><a href="#">Graham Smith</a></li>
+ <li><a href="#">Greta Peete</a></li>
+ <li data-role="list-divider">H</li>
+ <li><a href="#">Harvey Walls</a></li>
+ <li data-role="list-divider">M</li>
+ <li><a href="#">Mike Farnsworth</a></li>
+ <li><a href="#">Murray Vanderbuilt</a></li>
+ <li data-role="list-divider">N</li>
+ <li><a href="#">Nathan Williams</a></li>
+ <li data-role="list-divider">P</li>
+ <li><a href="#">Paul Baker</a></li>
+ <li><a href="#">Pete Mason</a></li>
+ <li data-role="list-divider">R</li>
+ <li><a href="#">Rod Tarker</a></li>
+ <li data-role="list-divider">S</li>
+ <li><a href="#">Sawyer Wakefield</a></li>
</ul>
- </div><!-- /navbar -->
- </div><!-- /footer -->
+
+
+
+
+
+
+
+
+ </div><!--/content-primary -->
+
+ <div class="content-secondary">
+
+ <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
+
+ <h3>More in this section</h3>
+
+ <ul data-role="listview" data-theme="c" data-dividertheme="d">
+
+ <li data-role="list-divider">Toolbars</li>
+ <li><a href="docs-bars.html">Toolbar basics</a></li>
+ <li><a href="docs-headers.html">Header bars</a></li>
+ <li><a href="docs-footers.html">Footer bars</a></li>
+ <li><a href="docs-navbar.html">Navbars</a></li>
+ <li><a href="bars-fixed.html">Fixed positioning</a></li>
+ <li data-theme="a"><a href="footer-persist-a.html">Persistent toolbars</a></li>
+ <li><a href="bars-themes.html">Theming toolbars</a></li>
+
+ </ul>
+ </div>
+ </div>
+
+ </div><!-- /content -->
+
+ <div data-role="footer" data-id="foo1" data-position="fixed">
+ <div data-role="navbar">
+ <ul>
+ <li><a href="footer-persist-a.html" data-prefetch="true" data-transition="slideup">Info</a></li>
+ <li><a href="footer-persist-b.html" data-prefetch="true" class="ui-btn-active ui-state-persist">Friends</a></li>
+ <li><a href="footer-persist-c.html" data-prefetch="true">Albums</a></li>
+ <li><a href="footer-persist-d.html" data-prefetch="true">Emails</a></li>
+ </ul>
+ </div><!-- /navbar -->
+ </div><!-- /footer -->
- </div><!-- /page -->
+ </div><!-- /page -->
- </body>
- </html>
+ </body>
+ </html>
Oops, something went wrong.

0 comments on commit 2fa3282

Please sign in to comment.