mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-24 16:14:44 +00:00
Kept Patty's description, only 3 pages now though.
This commit is contained in:
scottjehl
parent
7c7fffabcf
commit
8a140d1de2
6 changed files with 224 additions and 282 deletions
79
docs/toolbars/footer-persist-a.html
Executable file
79
docs/toolbars/footer-persist-a.html
Executable file
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Framework - Persistent footer demo</title>
|
||||
<link rel="stylesheet" href="../../themes/default" />
|
||||
<script type="text/javascript" src="../../js/all"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page">
|
||||
|
||||
<div data-role="header" data-position="fixed">
|
||||
<h1>Fixed Header</h1>
|
||||
<a href="index.html" data-icon="arrow-l">Back</a>
|
||||
<a href="../forms/forms-all.html" data-rel="dialog" data-transition="pop" data-icon="gear" class="ui-btn-right">Options</a>
|
||||
</div>
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<div class="ui-body">
|
||||
<h2>Friends</h2>
|
||||
<p>This page is a demo of a persistent footer navigation bar. At the foot of the page, you'll see a persistent horizontal navigation bar. Click on any of the links, and you'll see the page content transition but the 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. </p>
|
||||
</div>
|
||||
|
||||
|
||||
<ul data-role="listview" data-dividertheme="d">
|
||||
<li data-role="list-divider">A</li>
|
||||
<li><a href="index.html">Adam Kinkaid</a></li>
|
||||
<li><a href="index.html">Alex Wickerham</a></li>
|
||||
<li><a href="index.html">Avery Johnson</a></li>
|
||||
<li data-role="list-divider">B</li>
|
||||
<li><a href="index.html">Bob Cabot</a></li>
|
||||
<li data-role="list-divider">C</li>
|
||||
<li><a href="index.html">Caleb Booth</a></li>
|
||||
<li><a href="index.html">Christopher Adams</a></li>
|
||||
<li><a href="index.html">Culver James</a></li>
|
||||
<li data-role="list-divider">D</li>
|
||||
<li><a href="index.html">David Walsh</a></li>
|
||||
<li><a href="index.html">Drake Alfred</a></li>
|
||||
<li data-role="list-divider">E</li>
|
||||
<li><a href="index.html">Elizabeth Bacon</a></li>
|
||||
<li><a href="index.html">Emery Parker</a></li>
|
||||
<li><a href="index.html">Enid Voldon</a></li>
|
||||
<li data-role="list-divider">F</li>
|
||||
<li><a href="index.html">Francis Wall</a></li>
|
||||
<li data-role="list-divider">G</li>
|
||||
<li><a href="index.html">Graham Smith</a></li>
|
||||
<li><a href="index.html">Greta Peete</a></li>
|
||||
<li data-role="list-divider">H</li>
|
||||
<li><a href="index.html">Harvey Walls</a></li>
|
||||
<li data-role="list-divider">M</li>
|
||||
<li><a href="index.html">Mike Farnsworth</a></li>
|
||||
<li><a href="index.html">Murray Vanderbuilt</a></li>
|
||||
<li data-role="list-divider">N</li>
|
||||
<li><a href="index.html">Nathan Williams</a></li>
|
||||
<li data-role="list-divider">P</li>
|
||||
<li><a href="index.html">Paul Baker</a></li>
|
||||
<li><a href="index.html">Pete Mason</a></li>
|
||||
<li data-role="list-divider">R</li>
|
||||
<li><a href="index.html">Rod Tarker</a></li>
|
||||
<li data-role="list-divider">S</li>
|
||||
<li><a href="index.html">Sawyer Wakefield</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div data-role="footer" data-id="foo1" data-position="fixed">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="footer-persist-a.html" class="ui-btn-active">Friends</a></li>
|
||||
<li><a href="footer-persist-b.html">Albums</a></li>
|
||||
<li><a href="footer-persist-c.html">Emails</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -11,58 +11,102 @@
|
|||
|
||||
<div data-role="header" data-position="fixed">
|
||||
<h1>Fixed Header</h1>
|
||||
<a href="index.html" data-icon="arrow-l">Back</a>
|
||||
<a href="../forms/forms-all.html" data-rel="dialog" data-transition="pop" data-icon="gear" class="ui-btn-right">Options</a>
|
||||
</div>
|
||||
|
||||
<div data-role="content">
|
||||
<ul data-role="listview">
|
||||
<li>
|
||||
<img src="../lists/images/album-bb.jpg" />
|
||||
<h3><a href="index.html">Broken Bells</a></h3>
|
||||
<p>Broken Bells</p>
|
||||
<p class="ui-li-aside">$<strong>11.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-hc.jpg" />
|
||||
<h3><a href="index.html">Warning</a></h3>
|
||||
<p>Hot Chip</p>
|
||||
<p class="ui-li-aside">$<strong>12.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-p.jpg" />
|
||||
<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
|
||||
<p>Phoenix</p>
|
||||
<p class="ui-li-aside">$<strong>11.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-ok.jpg" />
|
||||
<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
|
||||
<p>Ok Go</p>
|
||||
<p class="ui-li-aside">$<strong>10.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-ws.jpg" />
|
||||
<h3><a href="index.html">Elephant</a></h3>
|
||||
<p>The White Stripes</p>
|
||||
<p class="ui-li-aside">$<strong>9.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-rh.jpg" />
|
||||
<h3><a href="index.html">Kid A</a></h3>
|
||||
<p>Radiohead</p>
|
||||
<p class="ui-li-aside">$<strong>11.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-xx.jpg" />
|
||||
<h3><a href="index.html">XX</a></h3>
|
||||
<p>XX</p>
|
||||
<p class="ui-li-aside">$<strong>10.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-mg.jpg" />
|
||||
<h3><a href="index.html">Congratulations</a></h3>
|
||||
<p>MGMT</p>
|
||||
<p class="ui-li-aside">$<strong>12.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="../lists/images/album-ag.jpg" />
|
||||
<h3><a href="index.html">Ashes Grammar</a></h3>
|
||||
<p>A Sunny Day in Glasgow</p>
|
||||
<p class="ui-li-aside">$<strong>11.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="../lists/images/album-k.jpg" />
|
||||
<h3><a href="index.html">Hot Fuss</a></h3>
|
||||
<p>Killers</p>
|
||||
<p class="ui-li-aside">$<strong>12.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-af.jpg" />
|
||||
<h3><a href="index.html">The Suburbs</a></h3>
|
||||
<p>Arcade Fire</p>
|
||||
<p class="ui-li-aside">$<strong>12.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul data-role="listview" data-dividertheme="d">
|
||||
<li data-role="list-divider">A</li>
|
||||
<li><a href="index.html">Adam Kinkaid</a></li>
|
||||
<li><a href="index.html">Alex Wickerham</a></li>
|
||||
<li><a href="index.html">Avery Johnson</a></li>
|
||||
<li data-role="list-divider">B</li>
|
||||
<li><a href="index.html">Bob Cabot</a></li>
|
||||
<li data-role="list-divider">C</li>
|
||||
<li><a href="index.html">Caleb Booth</a></li>
|
||||
<li><a href="index.html">Christopher Adams</a></li>
|
||||
<li><a href="index.html">Culver James</a></li>
|
||||
<li data-role="list-divider">D</li>
|
||||
<li><a href="index.html">David Walsh</a></li>
|
||||
<li><a href="index.html">Drake Alfred</a></li>
|
||||
<li data-role="list-divider">E</li>
|
||||
<li><a href="index.html">Elizabeth Bacon</a></li>
|
||||
<li><a href="index.html">Emery Parker</a></li>
|
||||
<li><a href="index.html">Enid Voldon</a></li>
|
||||
<li data-role="list-divider">F</li>
|
||||
<li><a href="index.html">Francis Wall</a></li>
|
||||
<li data-role="list-divider">G</li>
|
||||
<li><a href="index.html">Graham Smith</a></li>
|
||||
<li><a href="index.html">Greta Peete</a></li>
|
||||
<li data-role="list-divider">H</li>
|
||||
<li><a href="index.html">Harvey Walls</a></li>
|
||||
<li data-role="list-divider">M</li>
|
||||
<li><a href="index.html">Mike Farnsworth</a></li>
|
||||
<li><a href="index.html">Murray Vanderbuilt</a></li>
|
||||
<li data-role="list-divider">N</li>
|
||||
<li><a href="index.html">Nathan Williams</a></li>
|
||||
<li data-role="list-divider">P</li>
|
||||
<li><a href="index.html">Paul Baker</a></li>
|
||||
<li><a href="index.html">Pete Mason</a></li>
|
||||
<li data-role="list-divider">R</li>
|
||||
<li><a href="index.html">Rod Tarker</a></li>
|
||||
<li data-role="list-divider">S</li>
|
||||
<li><a href="index.html">Sawyer Wakefield</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div data-role="footer" data-id="foo1" data-position="fixed">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="footer-persist.html" class="ui-btn-active">Cars</a></li>
|
||||
<li><a href="footer-persist-b.html">Friends</a></li>
|
||||
<li><a href="footer-persist-c.html">Albums</a></li>
|
||||
<li><a href="footer-persist-d.html">Emails</a></li>
|
||||
<li><a href="footer-persist-a.html">Friends</a></li>
|
||||
<li><a href="footer-persist-b.html" class="ui-btn-active">Albums</a></li>
|
||||
<li><a href="footer-persist-c.html">Emails</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
|
||||
|
|
|
|||
|
|
@ -11,102 +11,73 @@
|
|||
|
||||
<div data-role="header" data-position="fixed">
|
||||
<h1>Fixed Header</h1>
|
||||
<a href="index.html" data-icon="arrow-l">Back</a>
|
||||
<a href="../forms/forms-all.html" data-rel="dialog" data-transition="pop" data-icon="gear" class="ui-btn-right">Options</a>
|
||||
</div>
|
||||
|
||||
<div data-role="content">
|
||||
<ul data-role="listview">
|
||||
<li>
|
||||
<img src="../lists/images/album-bb.jpg" />
|
||||
<h3><a href="index.html">Broken Bells</a></h3>
|
||||
<p>Broken Bells</p>
|
||||
<p class="ui-li-aside">$<strong>11.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-hc.jpg" />
|
||||
<h3><a href="index.html">Warning</a></h3>
|
||||
<p>Hot Chip</p>
|
||||
<p class="ui-li-aside">$<strong>12.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-p.jpg" />
|
||||
<h3><a href="index.html">Wolfgang Amadeus Phoenix</a></h3>
|
||||
<p>Phoenix</p>
|
||||
<p class="ui-li-aside">$<strong>11.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-ok.jpg" />
|
||||
<h3><a href="index.html">Of The Blue Colour Of The Sky</a></h3>
|
||||
<p>Ok Go</p>
|
||||
<p class="ui-li-aside">$<strong>10.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-ws.jpg" />
|
||||
<h3><a href="index.html">Elephant</a></h3>
|
||||
<p>The White Stripes</p>
|
||||
<p class="ui-li-aside">$<strong>9.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-rh.jpg" />
|
||||
<h3><a href="index.html">Kid A</a></h3>
|
||||
<p>Radiohead</p>
|
||||
<p class="ui-li-aside">$<strong>11.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-xx.jpg" />
|
||||
<h3><a href="index.html">XX</a></h3>
|
||||
<p>XX</p>
|
||||
<p class="ui-li-aside">$<strong>10.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-mg.jpg" />
|
||||
<h3><a href="index.html">Congratulations</a></h3>
|
||||
<p>MGMT</p>
|
||||
<p class="ui-li-aside">$<strong>12.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="../lists/images/album-ag.jpg" />
|
||||
<h3><a href="index.html">Ashes Grammar</a></h3>
|
||||
<p>A Sunny Day in Glasgow</p>
|
||||
<p class="ui-li-aside">$<strong>11.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<img src="../lists/images/album-k.jpg" />
|
||||
<h3><a href="index.html">Hot Fuss</a></h3>
|
||||
<p>Killers</p>
|
||||
<p class="ui-li-aside">$<strong>12.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
<li>
|
||||
<img src="../lists/images/album-af.jpg" />
|
||||
<h3><a href="index.html">The Suburbs</a></h3>
|
||||
<p>Arcade Fire</p>
|
||||
<p class="ui-li-aside">$<strong>12.99</strong></p>
|
||||
<a href="index.html">Purchase album</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<ul data-role="listview">
|
||||
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Stephen Weber</a></h3>
|
||||
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
|
||||
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">jQuery Team</a></h3>
|
||||
<p><strong>Boston Conference Planning</strong></p>
|
||||
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
|
||||
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
|
||||
</li>
|
||||
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Avery Walker</a></h3>
|
||||
<p><strong>Re: Dinner Tonight</strong></p>
|
||||
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
|
||||
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
|
||||
</li>
|
||||
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Amazon.com</a></h3>
|
||||
<p><strong>4-for-3 Books for Kids</strong></p>
|
||||
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
|
||||
<p class="ui-li-aside"><strong>12:47</strong>PM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Mike Taylor</a></h3>
|
||||
<p><strong>Re: This weekend in Maine</strong></p>
|
||||
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Redfin</a></h3>
|
||||
<p><strong>Redfin listing updates for today</strong></p>
|
||||
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
|
||||
<p class="ui-li-aside"><strong>5:52</strong>AM</p>
|
||||
</li>
|
||||
<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Angela Smith</a></h3>
|
||||
<p><strong>Link Request</strong></p>
|
||||
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Mike Taylor</a></h3>
|
||||
<p><strong>This weekend in Maine</strong></p>
|
||||
<p>Sounds good, let me check into our plans.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div data-role="footer" data-id="foo1" data-position="fixed">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="footer-persist.html" class="ui-btn-active">Cars</a></li>
|
||||
<li><a href="footer-persist-b.html">Friends</a></li>
|
||||
<li><a href="footer-persist-c.html">Albums</a></li>
|
||||
<li><a href="footer-persist-d.html">Emails</a></li>
|
||||
<li><a href="footer-persist-a.html">Friends</a></li>
|
||||
<li><a href="footer-persist-b.html">Albums</a></li>
|
||||
<li><a href="footer-persist-c.html" class="ui-btn-active">Emails</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
|
||||
|
|
|
|||
|
|
@ -1,88 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Framework - Persistent footer demo</title>
|
||||
<link rel="stylesheet" href="../../themes/default" />
|
||||
<script type="text/javascript" src="../../js/all"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page">
|
||||
|
||||
<div data-role="header" data-position="fixed">
|
||||
<h1>Fixed Header</h1>
|
||||
<a href="../forms/forms-all.html" data-rel="dialog" data-transition="pop" data-icon="gear" class="ui-btn-right">Options</a>
|
||||
</div>
|
||||
|
||||
<div data-role="content">
|
||||
<ul data-role="listview">
|
||||
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Stephen Weber</a></h3>
|
||||
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
|
||||
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">jQuery Team</a></h3>
|
||||
<p><strong>Boston Conference Planning</strong></p>
|
||||
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
|
||||
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
|
||||
</li>
|
||||
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Avery Walker</a></h3>
|
||||
<p><strong>Re: Dinner Tonight</strong></p>
|
||||
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
|
||||
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
|
||||
</li>
|
||||
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Amazon.com</a></h3>
|
||||
<p><strong>4-for-3 Books for Kids</strong></p>
|
||||
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
|
||||
<p class="ui-li-aside"><strong>12:47</strong>PM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Mike Taylor</a></h3>
|
||||
<p><strong>Re: This weekend in Maine</strong></p>
|
||||
<p>Hey little buddy, sorry but I can't make it up to vacationland this weekend. Maybe next weekend?</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Redfin</a></h3>
|
||||
<p><strong>Redfin listing updates for today</strong></p>
|
||||
<p>There are 3 updates for the home on your watchlist: 1 updated MLS listing and 2 homes under contract.</p>
|
||||
<p class="ui-li-aside"><strong>5:52</strong>AM</p>
|
||||
</li>
|
||||
<li data-role="list-divider">Tuesday, October 5, 2010 <span class="ui-li-count">3</span></li>
|
||||
<li>
|
||||
<h3><a href="index.html">Angela Smith</a></h3>
|
||||
<p><strong>Link Request</strong></p>
|
||||
<p>My name is Angela Smith, SEO Consultant. I've greatly enjoyed looking through your site and I was wondering if you'd be interested in providing a link</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3><a href="index.html">Mike Taylor</a></h3>
|
||||
<p><strong>This weekend in Maine</strong></p>
|
||||
<p>Sounds good, let me check into our plans.</p>
|
||||
<p class="ui-li-aside"><strong>6:24</strong>AM</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div data-role="footer" data-id="foo1" data-position="fixed">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="footer-persist.html" class="ui-btn-active">Cars</a></li>
|
||||
<li><a href="footer-persist-b.html">Friends</a></li>
|
||||
<li><a href="footer-persist-c.html">Albums</a></li>
|
||||
<li><a href="footer-persist-d.html">Emails</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Mobile Framework - Persistent footer demo</title>
|
||||
<link rel="stylesheet" href="../../themes/default" />
|
||||
<script type="text/javascript" src="../../js/all"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div data-role="page">
|
||||
|
||||
<div data-role="header" data-position="fixed">
|
||||
<h1>Fixed Footer Demo</h1>
|
||||
<a href="../forms/forms-all.html" data-rel="dialog" data-transition="pop" data-icon="gear" class="ui-btn-right">Options</a>
|
||||
</div>
|
||||
|
||||
<div data-role="content">
|
||||
|
||||
<h2>Fixed footer navigation bar</h2>
|
||||
<p>This page is a demo of a persistent footer navigation bar. At the foot of the page, you'll see a persistent horizontal navigation bar. Click on any of the links, and you'll see the page content transition but the 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. </p>
|
||||
|
||||
<ul data-role="listview">
|
||||
<li><a href="index.html">Acura</a></li>
|
||||
<li><a href="index.html">Audi</a></li>
|
||||
<li><a href="index.html">BMW</a></li>
|
||||
<li><a href="index.html">Cadillac</a></li>
|
||||
<li><a href="index.html">Chrysler</a></li>
|
||||
<li><a href="index.html">Dodge</a></li>
|
||||
<li><a href="index.html">Ferrari</a></li>
|
||||
<li><a href="index.html">Ford</a></li>
|
||||
<li><a href="index.html">GMC</a></li>
|
||||
<li><a href="index.html">Honda</a></li>
|
||||
<li><a href="index.html">Hyundai</a></li>
|
||||
<li><a href="index.html">Infiniti</a></li>
|
||||
<li><a href="index.html">Jeep</a></li>
|
||||
<li><a href="index.html">Kia</a></li>
|
||||
<li><a href="index.html">Lexus</a></li>
|
||||
<li><a href="index.html">Mini</a></li>
|
||||
<li><a href="index.html">Nissan</a></li>
|
||||
<li><a href="index.html">Porsche</a></li>
|
||||
<li><a href="index.html">Subaru</a></li>
|
||||
<li><a href="index.html">Toyota</a></li>
|
||||
<li><a href="index.html">Volkswagon</a></li>
|
||||
<li><a href="index.html">Volvo</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div data-role="footer" data-id="foo1" data-position="fixed">
|
||||
<div data-role="navbar">
|
||||
<ul>
|
||||
<li><a href="footer-persist.html" class="ui-btn-active">Cars</a></li>
|
||||
<li><a href="footer-persist-b.html">Friends</a></li>
|
||||
<li><a href="footer-persist-c.html">Albums</a></li>
|
||||
<li><a href="footer-persist-d.html">Emails</a></li>
|
||||
</ul>
|
||||
</div><!-- /navbar -->
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
<li><a href="bars-fixed.html">Fixed positioning</a></li>
|
||||
<li><a href="bars-fullscreen.html">Fullscreen positioning</a></li>
|
||||
<li><a href="navbar.html">Nav bar in header example</a></li>
|
||||
<li><a href="footer-persist.html">Persistent footer nav bar</a></li>
|
||||
<li><a href="footer-persist-a.html">Persistent footer nav bar</a></li>
|
||||
<li><a href="bars-themes.html">Theming toolbars</a></li>
|
||||
<li><a href="api-bars.html">API documentation</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in a new issue