Cette page vous montre un exemple de barre d'outils en mode "plein écran". Cette type de barre d'outils est utilisé dans des cas spéciaux où vous souhaitez que le contenu remplissent tout l'écran, et vous voulez que les barres d'outils entête et pied de page apparaissent et disparaissent lorsque la page est cliquée — un scénario commun pour visionner des photos, images ou vidéos.
Pour activer cette fonctionnalité de la barre d'outils, il vous suffit d'appliquer l'attribut data-fullscreen="true" à la balise <div/> qui a l'attribut data-role="page", et l'attribut data-position="fixed" à la fois à l'en-tête et au pied de page des éléments <div/>.
Gardez à l'esprit que les barres d'outils dans ce mode seront en surimpression sur le contenu de la page, et qu'ainsi tout le contenu ne sera pas accessible lorsque les barres d'outils seront ouverts, comme le montre cet exemple.
<!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" data-fullscreen="true"> <div data-role="header" data-position="fixed"> <h1>Page unique</h1> </div><!-- /header --> <div data-role="content"> <img src="http://jquerymobile.com/demos/1.0rc1/docs/toolbars/images/photo-run.jpeg" alt="Photo Run"> </div><!-- /content --> <div data-role="footer" data-position="fixed"> <h4>Contenu du pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Plein écran avec entête fixe