Cette page est un exemple de page dotée d'un pied de page persistant renfermant une barre de navigation. Au bas de la page, vous verrez une barre de navigation horizontale persistante. Cliquez sur un des liens du pied de page, et vous verrez le contenu de la page se modifier, tandis que le pied de page reste fixe : le pied de page est persistant, même s'il y a une transition vers une nouvelle page HTML, parce-que le pied de page de ces quatres pages HTML ont le même attribut data-id. Note : Si vous souhaitez un bouton actif dans votre barre de navigation pour rester actif lorsque vous revenez à la page affichant ce bouton actif, ajoutez la classe ui-state-persist en plus de ui-btn-active dans l'ancre correspondante.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page unique</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Amis</h1> </div><!-- /header --> <div data-role="content"> <ul data-role="listview" data-dividertheme="d" style="margin-top: 0;"> <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><!-- /content --> <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="exemple-footer-persist-a.html" class="ui-btn-active ui-state-persist">Friends</a></li> <li><a href="exemple-footer-persist-b.html">Albums</a></li> <li><a href="exemple-footer-persist-c.html">Emails</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Pied de page persistant avec barre de navigation