Pages jQuery Mobile

Entrer dans jQuery Mobile

Astuce :Bien que jQuery Mobile soit compatible avec tous les appareils mobiles, il peut toujours présenter des problèmes de compatibilité sur les ordinateurs de bureau (du fait du support limité de CSS3).

Par conséquent, dans ce tutoriel, nous vous recommandons d'utiliser le navigateur Google Chrome pour une expérience de lecture optimale.

Exemple

<body>
<div data-role="page">
  <div data-role="header">
    <h1>Bienvenue sur mon site principal</h1>
  </div>
  <div data-role="content">
    <p>Je suis un développeur mobile !</p>
  </div>
  <div data-role="footer">
    <h1>Texte de pied de page</h1>
  </div>
</div>
</body>

Essayer vous-même

Explication de l'exemple :

  • data-role="page" est la page affichée dans le navigateur
  • data-role="header" crée une barre d'outils en haut de la page (souvent utilisée pour des titres et des boutons de recherche)
  • data-role="content" définit le contenu de la page, comme du texte, des images, des formulaires et des boutons, etc.
  • data-role="footer" crée une barre d'outils en bas de la page

Dans ces conteneurs, vous pouvez ajouter n'importe quel élément HTML - paragraphes, images, titres, listes, etc.

Astuce :Les attributs data-* de HTML5 sont utilisés pour créer une interface interactive et tactile pour les appareils mobiles via jQuery Mobile.

Ajouter une page dans jQuery Mobile

Dans jQuery Mobile, vous pouvez créer plusieurs pages dans un seul fichier HTML.

Séparez chaque page par un id unique et utilisez l'attribut href pour les connecter :

Exemple

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">Aller à la page deux</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Aller à la page un</a>
  </div>
</div>

Essayer vous-même

Remarque :Les applications web contenant une grande quantité de contenu peuvent affecter le temps de chargement (par exemple, du texte, des liens, des images et des scripts, etc.). Si vous ne souhaitez pas utiliser de fichiers internes pour les pages de liens, utilisez des fichiers externes :

<a href="externalfile.html">Aller à une page externe</a>

Utiliser une page comme boîte de dialogue

La boîte de dialogue est un type de fenêtre utilisée pour afficher des informations ou demander des entrées.

Pour créer une boîte de dialogue lors du clic (ou du toucher) sur un lien, ajoutez data-rel="dialog" à ce lien :

Exemple

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo"> data-rel="dialog">Aller à la page deux</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">Aller à la page un</a>
  </div>
</div>

Essayer vous-même