mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-04-20 14:20:59 +00:00
64 lines
No EOL
2.3 KiB
HTML
Executable file
64 lines
No EOL
2.3 KiB
HTML
Executable file
<!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> |