Il est formidable de pouvoir rogner une page web HTML5 et CSS3 afin de l'adapter sur un appareil mobile, mais évidemment, si la page est plus petite, vous aurez besoin de plusieurs d'entre eux. Les applications mobiles ont souvent recours à une métaphore de la page-renversant pour emballer plus de données dans un petit morceau de l'écran immobilier, et de la bibliothèque mobile jQuery a un autre outil merveilleux pour rendre cela facile.

Jusqu'à présent, cette application semble juste comme les autres applications mobiles jQuery vous avez vu jusqu'ici. Une chose est différent, et que le bouton est dans la tête. Il est très fréquent pour les applications mobiles d'avoir des boutons de navigation dans l'en-tête. Appuyez sur le bouton Suivant.

Après une transition de fondu astucieux, la page suivante apparaît. Celui-ci dispose de deux boutons dans l'en-tête. En appuyant sur Next reprend l'utilisateur à la troisième page.

La troisième page est une nouvelle fois très familier, mais cette fois il a un seul bouton sur la gauche de l'en-tête, et un autre bouton dans la zone de contenu principal.

La chose intéressante à propos de ces trois pages est qu'ils ne sont pas trois pages à tous! Il est tout simplement une page, conçu pour agir comme trois pages différentes. Il ya quelques avantages à cet arrangement.

• Ressources CSS et javascript ne doivent être chargés une fois: Cela permet de maintenir le système cohérent et améliore légèrement les temps de chargement.

• Il n'y a pas temps de latence: Lorsque les charges de documents, le tout est dans la mémoire, même si seulement une partie est visible à la fois. Cela vous permet de déplacer rapidement entre les pages sans avoir à attendre pour accéder au serveur.

Vous auriez normalement mettre en œuvre ce type de mécanisme lorsque vous avez une grande page que vous souhaitez traiter comme plusieurs petites pages afin que l'utilisateur n'a pas à faire défiler.

Voici le code pour multiPage.html dans son intégralité.

Page One
Suivant
Ceci est l'indice
Page 1
page 2
page 3
de HTML All in One for Dummies
prev
Page deux
Suivant



La seconde page est un peu comme la première, exceptit est pas le premier, et il a plutôt thanbuttons texte. Il est le deuxième page.If vous aimez le premier, je suppose que vous Cango dos, mais vous devriez vraiment aller à la nextpage, parce que je l'entends est vraiment agréable.
de HTML All in One for Dummies
prev
Page trois

33333333 333333333 33333333

Aller à l'index

Alors que le code de cet exemple est long, il ne rompt pas beaucoup de nouvelle terre.

1. Chargez le contenu mobile jQuery.

   Tirez dans le CSS nécessaire et fichiers javascript à partir du site jQuery.com.

2. Appliquer votre propre CSS.

   Même si vous êtes “ emprunt ” Code CSS de jQuery, vous êtes toujours autorisé à ajouter votre propre. Vous pouvez ajouter des CSS pour faire le pied de page et des éléments pré agissent de la manière que vous voulez.

3. Construisez vos pages.

   Vous pouvez construire autant de pages que vous voulez, mais ils ont tous suivre le même schéma mobiles générale jQuery: Créer une page div avec divs tête, le contenu, et de pied. Utilisez le data-role attribuer à indiquer le rôle de chaque div.

4. Nom chacun des divs niveau de la page avec le id attribuer.

   Parce que l'utilisateur sera feuilletant les pages, chaque page besoin d'une sorte d'identifiant. Donnez à chaque page, un unique, id attribuer.

5. Construire boutons à l'intérieur des têtes.

   La seule nouvelle vraiment partie de cet exemple (en dehors de la page-renversant se # 8202- # 8202-) est les boutons dans les en-têtes. Passez à l'en-tête page 2, et vous verrez quelque chose de vraiment intéressant:

   prev
   Page deux
   Suivant

   Si vous définissez un lien intérieur d'un élément avec le les données d'en-tête-rôle, ce lien deviendra automatiquement un bouton. En outre, le premier lien tel que défini sera automatiquement placé à la gauche de l'en-tête, et le second est placé sur la droite.

6. Forcer un seul bouton à la droite.

   Si vous voulez un bouton pour être sur la droite, ajouter une classe à la touche:

   Page One
   Suivant

7. Utilisez des chevilles internes pour passer entre les pages.

   Jetez un oeil à des URL à tous les boutons. Ils commencent avec un hachage, ce qui indique un lien interne à l'intérieur du document. Rappelez-vous, si cela se sent comme trois pages différentes à l'utilisateur, il est vraiment tout une seule page Web grand.

8. Expérimenter avec des transitions.

   Jetez un oeil attentif sur le bouton sur la page trois:

   Aller à l'index

   Ce bouton a une spéciale données de transition attribuer. Par défaut, les pages mobiles échanger avec un fondu. Vous pouvez régler la transition vers diapositive, glisser vers le haut, glisse vers le bas, pop, fondu, ou bascule. Vous pouvez aussi inverser la transition en ajoutant un autre attribut: données-direction = ” inverser ”.