Page jQuery Mobile
Lancer l'apprentissage jQuery Mobile
 | Bien que jQuery Mobile est compatible avec tous les appareils mobiles, mais ne fait pas entièrement compatible avec le PC (en raison du soutien de CSS3 limitée). Afin de mieux lire ce tutoriel, nous vous recommandons d'utiliser le navigateur Google Chrome. |
|---|
Exemples
<body>
<div data-role="page" >
<div data-role="header" >
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content" >
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer" >
<h1>底部文本</h1>
</div>
</div>
</body>
<div data-role="page" >
<div data-role="header" >
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="main" class="ui-content" >
<p>我现在是一个移动端开发者!!</p>
</div>
<div data-role="footer" >
<h1>底部文本</h1>
</div>
</div>
</body>
Essayez »
Des exemples d'analyse:
- data-role = "page" est la page dans le navigateur pour afficher.
- data-role = "header" est une barre d'outils en haut de la page est créée (habituellement utilisé pour le bouton de recherche ou titre)
- data-role = "principale" définit le contenu de la page, tels que textes, images, formes, boutons et ainsi de suite.
- "Ui-content" classe pour cette page remplissage et les marges.
- data-role = "footer" utilisé pour créer le bas de la barre d'outils de la page.
- Dans ces conteneurs, vous pouvez ajouter des éléments HTML - paragraphes, images, titres, listes, etc.
| jQuery Mobile comptent sur HTML5 de données * attributs pour soutenir différents éléments de l'interface utilisateur, de transition et de la structure de la page. Navigateur ne les ils seront jetés en silence en charge. |
|---|
Ajout de jQuery Mobile dans la page
Utilisez jQuery Mobile, vous pouvez créer un fichier HTML unique dans un certain nombre de pages.
Vous pouvez utiliser l'attribut href différent de distinguer en utilisant le même identifiant unique de la page:
Exemples
<Div data-role = " la page " id = "PageOne">
<Div data-role = class "principale" = "ui-content">
<a href="#pagetwo"> pour passer à une deuxième page </a>
</ Div>
</ Div>
<Div data-role = " la page " id = "pagetwo">
<Div data-role = class "principale" = "ui-content">
<a href="#pageone"> pour passer à la première page </a>
</ Div>
</ Div>
<Div data-role = class "principale" = "ui-content">
<a href="#pagetwo"> pour passer à une deuxième page </a>
</ Div>
</ Div>
<Div data-role = " la page " id = "pagetwo">
<Div data-role = class "principale" = "ui-content">
<a href="#pageone"> pour passer à la première page </a>
</ Div>
</ Div>
Essayez »
Remarque: Lorsque les applications web ont beaucoup de contenu (texte, images, scripts, etc.) va sérieusement affecter le temps de charge. Si vous ne souhaitez pas utiliser les liens dans page vous pouvez utiliser un fichier externe:
<a href="externalfile.html">访问外部文件</a>
Page que les utilisations de dialogue
Boîte de dialogue est utilisée pour afficher les informations d'affichage de l'information de page ou formulaire de saisie.
Ajouter dans le lien data-rel = boîte de dialogue pop-up "dialogue" permet aux utilisateurs de cliquer sur le lien:
Exemples
<Div data-role = "page" id = "PageOne">
<Div data-role = class "principale" = "ui-content">
<a saut à une deuxième page </a>
</ Div>
</ Div>
<Div data-role = "Page " data-dialogue = "true" id = "pagetwo">
<Div data-role = class "principale" = "ui-content">
<a saut à la première page </a>
</ Div>
</ Div>
<Div data-role = class "principale" = "ui-content">
<a saut à une deuxième page </a>
</ Div>
</ Div>
<Div data-role = "Page " data-dialogue = "true" id = "pagetwo">
<Div data-role = class "principale" = "ui-content">
<a saut à la première page </a>
</ Div>
</ Div>
Essayez »