jQuery Mobile Pages

Commencer à apprendre jQuery Mobile

lamp Bien que jQuery Mobile soit compatible avec tous les appareils mobiles, il n'est pas entièrement compatible avec les PC (en raison de la prise en charge limitée de CSS3).

Pour une meilleure expérience de lecture de ce tutoriel, il est recommandé d'utiliser le navigateur Google Chrome.

Exemples

<body>
<div data-role="page">

  <div data-role="header">
<h1>Bienvenue sur ma page d'accueil</h1>
  </div>

  <div data-role="main" class="ui-content">
<p>Je suis maintenant un développeur mobile!!</p>
  </div>

  <div data-role="footer">
<h1>Texte de pied de page</h1>
  </div>

</div>
</body>

Essayez-le vous-même »

Analyse de l'exemple :

  • data-role="page" est la page affichée dans le navigateur.
  • data-role="header" est une barre d'outils créée en haut de la page (généralement utilisée pour les titres ou les boutons de recherche).
  • data-role="main" définit le contenu de la page, comme le texte, les images, les formulaires, les boutons, etc.
  • La classe "ui-content" est utilisée pour ajouter du padding et des marges à la page.
  • data-role="footer" est utilisé pour créer une barre d'outils en bas de la page.
  • Vous pouvez ajouter n'importe quels éléments HTML dans ces conteneurs - paragraphes, images, titres, listes, etc.
lamp jQuery Mobile s'appuie sur les attributs HTML5 data-* pour prendre en charge divers éléments d'interface utilisateur, transitions et structures de page. Les navigateurs qui ne les prennent pas en charge les ignoreront silencieusement.

Ajoutez jQuery Mobile à votre page

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

Vous pouvez utiliser différents attributs href pour faire référence à des pages avec des id uniques :

Exemples

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
    <a href="#pagetwo">Aller à la deuxième page</a>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="main" class="ui-content">
    <a href="#pageone">Aller à la première page</a>
  </div>
</div>

Essayez-le vous-même »

Remarque :Lorsqu'une application web contient une grande quantité de contenu (texte, images, scripts, etc.), cela affectera sérieusement le temps de chargement. Si vous ne souhaitez pas utiliser de liens de page internes, vous pouvez utiliser des fichiers externes :

<a href="externalfile.html">访问外部文件</a>

Pages en tant que boîtes de dialogue

Une boîte de dialogue est utilisée pour afficher les informations de la page ou pour saisir les informations d'un formulaire.

Ajoutez data-rel="dialog" à un lien pour faire apparaître une boîte de dialogue lorsque l'utilisateur clique sur le lien :

Exemples

<div data-role="page" id="pageone">
  <div data-role="main" class="ui-content">
<a href="#pagetwo">Aller à la deuxième page</a>
  </div>
</div>

<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="main" class="ui-content">
<a href="#pageone">Aller à la première page</a>
  </div>
</div>

Essayez-le vous-même »
Autres extensions