Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-15 01:53:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

all new persistent footer nav bar demos

Browse source
This commit is contained in:
Todd Parker 2010-10-13 18:41:35 -04:00
parent 2f497bc06e
commit 3d06d39926
5 changed files with 311 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
docs/toolbars/footer-persist-b.html Executable file
View file

@ -0,0 +1,73 @@
<!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">
<h1>Fixed Header</h1>
</div>
<div data-role="content">
<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">
<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>

117
docs/toolbars/footer-persist-c.html Executable file
View file

@ -0,0 +1,117 @@
<!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">
<h1>Fixed Header</h1>
</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>
</div>
<div data-role="footer" data-id="foo1">
<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>

88
docs/toolbars/footer-persist-d.html Executable file
View file

@ -0,0 +1,88 @@
<!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">
<h1>Fixed Header</h1>
</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">
<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>

113
docs/toolbars/footer-persist-result.html
View file

@ -1,113 +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">
<h1>Fixed Header</h1>
</div>
<div data-role="content">
<h2>Demo description</h2>
<p>The footer on this page should have persisted. </p>
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</div>
<div data-role="footer" data-id="foo1">
<h1>Sticky Footer 2</h1>
</div>
</div>
</body>
</html>

119
docs/toolbars/footer-persist.html
View file

@ -15,98 +15,45 @@
</div>
<div data-role="content">
<h2>Demo description</h2>
<p>This is a demo of a persistent footer. The footer on this page should stick when transitioning to the next page, because they have the same data-id attributes. </p>
<a href="footer-persist-result.html" data-role="button" data-theme="b" data-icon="arrow-r" data-iconpos="right">Try it out!</a>
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<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>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<h2>Demo description</h2>
<p>This is a demo of a persistent footer - click the tabs below. The footer on this page should stick when transitioning to the next page, because they have the same data-id attributes. </p>
</div>
<div data-role="footer" data-id="foo1">
<h1>Sticky Footer 1</h1>
<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>