Comment créer un document mobile multipage pour la programmation HTML5 et CSS3 - les nuls

C'est bien d'être capable de réduire une page Web HTML5 et CSS3 il s'adapte sur un appareil mobile, mais évidemment, si la page est plus petite, vous aurez besoin de plus d'entre eux. Les applications mobiles utilisent souvent une métaphore de retournement de page pour emballer plus de données dans un petit morceau d'écran immobilier, et la bibliothèque mobile jQuery a un autre outil merveilleux pour rendre cela facile.

Jusqu'à présent, cette application ressemble exactement aux autres applications mobiles jQuery que vous avez vues jusqu'ici. Une chose est différente, et c'est le bouton dans l'en-tête. Il est très commun pour les applications mobiles d'avoir des boutons de navigation dans l'en-tête. Appuyez sur le bouton Suivant.

Après une transition astucieuse, la page suivante apparaît. Celui-ci a deux boutons dans l'en-tête. Une nouvelle pression sur Next amène l'utilisateur à la troisième page.

La troisième page est de nouveau très familière, mais cette fois-ci, il y a un seul bouton à gauche de l'en-tête et un autre bouton dans la zone de contenu principal.

Ce qui est intéressant avec ces trois pages, c'est qu'elles ne sont pas trois pages! Tout est juste une page, conçue pour agir comme trois pages différentes. Il y a quelques avantages à cet arrangement.

• Les ressources CSS et JavaScript n'ont besoin d'être chargées qu'une seule fois: Cela maintient le système cohérent et améliore légèrement les temps de chargement.

• Il n'y a pas de délai: Lorsque le document est chargé, tout est en mémoire, même si une seule partie est visible à la fois. Cela vous permet de vous déplacer rapidement entre les pages sans avoir à attendre l'accès au serveur.

Vous devriez normalement implémenter ce type de mécanisme lorsque vous avez une grande page que vous voulez traiter comme plusieurs pages plus petites afin que l'utilisateur n'ait pas à faire défiler.

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

multiPage. html #foot {font-size: 75%; style de police: italique; text-align: center;} pre {marge-gauche: auto; marge-droite: auto; couleur de fond: blanc; width: 8em;}


Page One
next
Voici l'index

page 1
page 2
page 3
from HTML Tout en un pour les nuls prev

Page deux
suivant
La deuxième page ressemble beaucoup à la première, sauf qu'elle n'est pas la première et qu'elle contient du texte plutôt que des boutons. C'est la deuxième page. Si vous aimez le premier, je suppose que vous pouvez revenir en arrière, mais vous devriez vraiment aller à la page suivante, parce que je l'entends vraiment bien.
à partir de HTML Tout en un pour les nuls prev

Page Trois
3333333 3 3 3 33333 3 3 3 3333333

Aller à l'index
à partir de HTML Pour les nuls

Alors que le code de cet exemple est long, il ne brise pas beaucoup de terrain.

1. Chargez le contenu mobile de jQuery.

   Extrayez les fichiers CSS et JavaScript nécessaires de jQuery. site com.

2. Appliquez votre propre CSS.

   Même si vous "empruntez" du code CSS de jQuery, vous êtes toujours autorisé à ajouter le vôtre. Vous pouvez ajouter des CSS pour que le pied de page et les éléments pré agissent comme vous le souhaitez.

3. Créez vos pages.

   Vous pouvez créer autant de pages que vous le souhaitez, mais elles suivent toutes le même modèle de mobile jQuery général: Créez une div page avec des divs d'en-tête, de contenu et de pied de page. Utilisez l'attribut data-role pour indiquer le rôle de chaque div.

4. Nommez chacun des divs au niveau de la page avec l'attribut id.

   Parce que l'utilisateur parcourra les pages, chaque page a besoin d'un identifiant. Donnez à chaque page un attribut d'identifiant unique.

5. Créez des boutons dans les en-têtes.

   La seule partie réellement nouvelle de cet exemple (hormis le retournement de page) est les boutons dans les en-têtes. Passez directement à l'en-tête de la page 2, et vous verrez quelque chose de vraiment intéressant:

   prev
   
   Page Two
   next
   

   Si vous définissez un lien dans un élément avec l'en-tête data-role, ce lien deviendra automatiquement un bouton. De plus, le premier lien défini sera automatiquement placé à gauche de l'en-tête et le second sera placé à droite.

6. Forcer un seul bouton vers la droite.

   Si vous voulez qu'un bouton soit sur la droite, ajoutez une classe au bouton:

   
   
   Page One
   next
   

7. Utilisez des ancres internes pour passer d'une page à l'autre.

   Regardez les URL dans tous les boutons. Ils commencent par un hachage, qui indique un lien interne à l'intérieur du document. Rappelez-vous, bien que cela ressemble à trois pages différentes à l'utilisateur, c'est vraiment une seule grande page Web.

8. Expérimentez avec des transitions.

   Regardez attentivement le bouton de la page trois:

   Allez à l'index
   

   Ce bouton possède un attribut spécial de transition de données. Par défaut, les pages mobiles s'échangent avec un fondu. Vous pouvez définir la transition vers la diapositive, le slideup, le slidedown, le pop, le fondu ou le flip. Vous pouvez également inverser la transition en ajoutant un autre attribut: data-direction = "reverse".