Créer une page
Même si jQuery Mobile fonctionne sur tous les appareils mobiles, il peut avoir des problèmes de compatibilité sur les ordinateurs de bureau (en raison de l'appui de CSS3 limitée).
Pour ce tutoriel, nous vous recommandons d'utiliser le navigateur Google Chrome pour une meilleure expérience de lecture.
Ci-dessous, nous avons créé une page simple et standard jQuery Mobile:
Exemple
<body>
<div data-role="page" >
<div
data-role="header" >
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content" >
<p>I Am Now A Mobile Developer!!</p>
</div>
<div data-role="footer" >
<h1>Footer
Text</h1>
</div>
</div>
</body> Essayez - le vous - même » Exemple expliqué:
- Le data-role="page" est la page affichée dans le navigateur
- Le data-role="header" crée une barre d' outils en haut de la page (souvent utilisé pour titre ou recherche des boutons)
- Le data-role="main" définit le contenu de la page, comme du texte, des images, des boutons, des formes, etc.
- Le "ui-content" class ajoute un rembourrage supplémentaire et la marge à l' intérieur du contenu de la page
- Le data-role="footer" crée une barre d' outils en bas de la page
- A l'intérieur de ces conteneurs, vous pouvez ajouter des éléments HTML - paragraphes, images, titres, listes, etc.
Les HTML5 data-* attributs sont utilisés tout au long de jQuery Mobile pour créer un "touch-friendly" look et attrayant pour les appareils mobiles.
Ajout de pages dans jQuery Mobile
Dans jQuery Mobile, vous pouvez créer plusieurs pages dans un seul fichier HTML.
Séparer chaque page avec un identifiant unique et utiliser le href attribut pour relier entre elles:
Exemple
<div data-role="page" id="pageone" >
<div data-role="main" class="ui-content">
<a href="#pagetwo" >Go to
Page Two</a>
</div>
</div>
<div data-role="page"
id="pagetwo" >
<div
data-role="main" class="ui-content">
<a href="#pageone" >Go to Page
One</a>
</div>
</div> Essayez - le vous - même » Astuce: Le temps de charge sera affectée par des applications Web avec beaucoup de contenu (ie texte, des liens, des images, scripts , etc.). Utilisez des fichiers externes si vous ne voulez pas lier des pages à l'intérieur:
<a href="externalfile.html">Go To External Page</a>
Utilisation de pages que Dialogs
Une boîte de dialogue est un type de fenêtre utilisée pour afficher des informations spéciales ou demande d'entrée.
Pour créer une boîte de dialogue qui apparaît lorsqu'un utilisateur tape sur un lien, ajouter des data-dialog="true" de data-dialog="true" à la page que vous souhaitez afficher comme une boîte de dialogue:
Exemple
<div data-role="page" id="pageone">
<div
data-role="main" class="ui-content">
<a href="#pagetwo">Go to Page Two</a>
</div>
</div>
<div data-role="page"
data-dialog="true" id="pagetwo">
<div
data-role="main" class="ui-content">
<a href="#pageone">Go to Page One</a>
</div>
</div> Essayez - le vous - même »