Structure du pied de page
La barre d'outils pied de page (footer) à la même structure basique que l'entête, exception faite que l'attribut data-role a pour valeur footer.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page</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"> <h1>Titre</h1> </div><!-- /header --> <div data-role="content"> <p>Contenu de la page</p> </div><!-- /content --> <div data-role="footer"> <h4>Contenu du Pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
La barre d'outils footer aura par défaut le thème "a" (noire dans le thème par défaut) mais vous pouvez facilement définir un autre thème.
Voir le résultat : Pied de page (footer)
Ajouter des boutons
Tout lien ou balise de bouton valide ajouté au bas de page sera automatiquement transformé en un bouton. Pour économiser de l'espace, les boutons dans les barres d'outils sont automatiquement définies avec un style inline afin que le bouton soit aussi large que le texte et les icônes qu'il contient.
Par défaut, les barres d'outils n'ont aucun padding pour accommoder les barres de nav et autres widgets. Pour appliquer un padding à une barre, ajoutez class="ui-bar" au pied de page (footer).
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page</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"> <h1>Titre</h1> </div><!-- /header --> <div data-role="content"> <p>Contenu de la page</p> </div><!-- /content --> <div data-role="footer" class="ui-bar"> <a href="index.html" data-role="button" data-icon="delete">Supprimer</a> <a href="index.html" data-role="button" data-icon="plus">Ajouter</a> <a href="index.html" data-role="button" data-icon="arrow-u">Haut</a> <a href="index.html" data-role="button" data-icon="arrow-d">Bas</a> </div> </div><!-- /page --> </body> </html>
Cela créé une barre d'outils avec des boutons alignés sur une même ligne.
Voir le résultat : Boutons alignés sur une même ligne dans le pied de page.
Pour regrouper plusieurs boutons sous la forme d'un ensemble, envelopper les liens dans une balise <div/> avec des attributs data-role="controlgroup" et data-type="horizontal".
<div data-role="controlgroup" data-type="horizontal">
Cela permet de créer un ensemble groupé de boutons.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page</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"> <h1>Titre</h1> </div><!-- /header --> <div data-role="content"> <p>Contenu de la page</p> </div><!-- /content --> <div data-role="footer" class="ui-bar"> <div data-role="controlgroup" data-type="horizontal"> <a href="index.html" data-role="button" data-icon="delete">Supprimer</a> <a href="index.html" data-role="button" data-icon="plus">Ajouter</a> <a href="index.html" data-role="button" data-icon="arrow-u">Haut</a> <a href="index.html" data-role="button" data-icon="arrow-d">Bas</a> </div> </div> </div><!-- /page --> </body> </html>
Voir le résultat : Groupe de boutons alignés sur une même ligne dans le pied de page.
Ajouter des éléments formulaire
Les éléments d'un formulaire ainsi que d'autres contenus peuvent également être ajoutés aux barres d'outils. Voici un exemple de menu déroulant situé à l'intérieur d'une barre de pied de page :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page</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"> <h1>Titre</h1> </div><!-- /header --> <div data-role="content"> <p>Contenu de la page</p> </div><!-- /content --> <div data-role="footer" class="ui-bar" data-position="inline"> <select name="select-choice-1" id="select-choice-1" data-theme="a"> <option value="standard">Standard: 7 jours</option> <option value="rush">Rush: 3 jours</option> <option value="express">Express: jour suivant</option> <option value="overnight">la nuit</option> </select> </div> </div><!-- /page --> </body> </html>
Voir le résultat : Menu déroulant dans le pied de page.
Pied de page persistant
Dans les situations où le pied de page est un élément global de navigation, vous pouvez désirer le faire apparaître fixe entre les transitions de pages. Cela peut être réalisé en utilisant la fonctionnalité de persistance du pied de page incluse dans jQuery Mobile.
Pour créer un pied de page qui reste en place durant une transition, ajoutez l'attribut data-id au pied de page (footer) de toutes les pages pertinentes et utilisez la même valeur id pour chacune d'elles. Par exemple, en ajoutant data-id="myfooter" à la page courante et à la page cible, le framework gardera les ancres pied de page dans le même endroit durant l'animation de transition entre les pages. Veuillez noter : Cet effet fonctionnera correctement que si les barres d'outils entête (header) et pied de page (footer) sont définis avec data-position="fixed" de sorte qu'elles resteront toujours visible au cours de la transition.
<!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" id="une"> <div data-role="header"> <h1>Page Une</h1> </div><!-- /header --> <div data-role="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> <ul> <li><a href="#deux" title="Page 2">Aller à la page Deux</a></li> </ul> <p>Au cours de la transition entre pages, le pied de page restera fixe tandis que l´entête et le contenu glisseront.</p> </div><!-- /content --> <div data-role="footer" data-position="fixed" data-id="myfooter"> <h4>Pied de page 1</h4> </div> </div><!-- /page --> <div data-role="page" id="deux"> <div data-role="header"> <h1>Page Deux</h1> </div><!-- /header --> <div data-role="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> <ul> <li><a href="#une" title="Page 1">Aller à la page Une</a></li> </ul> <p>Au cours de la transition entre pages, le pied de page restera fixe tandis que l´entête et le contenu glisseront.</p> </div><!-- /content --> <div data-role="footer" data-position="fixed" data-id="myfooter"> <h4>Pied de page 2</h4> </div> </div><!-- /page --> </body> </html>
Voir le résultat : Pied de page fixe au cours d'une transition entre pages.