Cet article résume en détail les différents effets de changement de page et l'utilisation des boîtes de dialogue modales de HTML5. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Animation des pages :

L'attribut data-transition peut définir l'effet d'animation du changement de page.
Par exemple : Je vais faire apparaître
tableau des paramètres de transition de données :

Description du paramètre

glisser glisser de droite à gauche
glisser vers le haut glisser depuis le bas
glisser vers le bas glisser depuis le haut
pop fondu entrant depuis le centre développer
fondu fondu entrant
retourner retourner

Remarque : Si vous souhaitez afficher le bouton de retour dans la page cible, vous pouvez ajouter l'attribut data-direction="reverse" au lien. Cet attribut est le même que l'attribut data-back="true" d'origine. Je ne sais pas si ce sera dans la version officielle quel attribut sera conservé.

Dialogue modal

Une boîte de dialogue modale est un calque pseudo-flottant avec une barre de titre arrondie et un bouton de fermeture, utilisé pour des applications événementielles exclusives. Toute page structurée peut utiliser des liens data-rel="dialog" pour implémenter des applications de dialogue modal.
Par exemple : Ouvrir la boîte de dialogue
Cet effet de changement de page peut également utiliser l'effet de paramètre de transition de données de la norme page. Il est recommandé d'utiliser les paramètres "pop", "slideup" et "flip" pour de meilleurs résultats.
Cette boîte de dialogue modale générera par défaut un bouton de fermeture pour revenir à la page parent. Sur les appareils dotés de faibles capacités de script, vous pouvez également ajouter un lien avec data-rel="back" pour implémenter un bouton de fermeture.
Pour les appareils prenant en charge les scripts, vous pouvez directement utiliser href="#" ou data-rel="back" pour le fermer. Vous pouvez également utiliser la méthode intégrée « close » pour fermer la boîte de dialogue modale, par exemple : $('.ui-dialog').dialog('close').
La boîte de dialogue modale étant une page temporaire affichée dynamiquement, cette page ne sera pas enregistrée dans la table de hachage, ce qui signifie que nous ne pouvons pas revenir sur cette page. Par exemple, vous cliquez sur un lien pour l'ouvrir dans la page A. .B, l'opération est terminée et la boîte de dialogue est fermée, puis passe à la page C. À ce stade, si vous cliquez sur le bouton Précédent du navigateur, vous reviendrez à la page A, pas à la page B.

Barre d'outils

La barre d'outils est principalement utilisée dans les zones « en-tête », « pied de page » et autres pour prendre en charge et mettre en œuvre l'application des fonctions métier sur la page. jQuery Mobile propose une solution relativement complète.
La barre d'outils est divisée en trois applications : barre d'en-tête, barre de pied de page et barre de navigation.
Le titre et le pied de page ont des méthodes d'application différentes dans la page. La barre d'outils par défaut est positionnée en ligne. Cette méthode de positionnement peut atteindre une compatibilité maximale, y compris les scripts et les appareils avec une mauvaise compatibilité.
L'autre est le positionnement flottant (fixe), qui peut également être appelé positionnement « statique ». Cette méthode de positionnement peut maintenir la barre d'outils en haut ou en bas de l'écran. Il peut également accepter des événements de clic pour afficher/masquer la barre d'outils, maximisant ainsi l'utilisation de l'espace de l'écran.
Comment implémenter : ajoutez l'attribut data-position="fixed" aux zones de titre et de pied de page.

Conteneur de titre

Le conteneur de titre est un contrôle d'affichage dans la zone d'en-tête de la page. Il est principalement utilisé pour afficher le titre et la zone d'opération principale.
Code de structure :

Afin de faciliter l'interaction avec la page, il apparaîtra automatiquement à gauche côté du conteneur de titre après le changement de page. La génération d'un bouton de retour peut simplifier notre complexité de développement, mais parfois nous n'avons pas besoin de ce bouton de retour en raison des exigences de l'application. Vous pouvez ajouter l'attribut data-backbtn="false" au titre. conteneur pour empêcher le bouton de retour Créé automatiquement.
Un bouton peut être placé sur les côtés gauche et droit du conteneur de titre. Après avoir empêché le bouton de retour généré automatiquement, nous pouvons personnaliser le bouton à la position du bouton de retour.
Par exemple :


Si vous devez personnaliser le texte du bouton de retour par défaut, vous pouvez utiliser l'attribut data-back-btn-text="previous" ou l'implémenter via l'extension :

Si vous n'utilisez pas la structure standard pour créer la zone de titre, le framework ne générera pas automatiquement le bouton par défaut.

Conteneur de pied de page

La structure du conteneur de pied de page est fondamentalement la même que celle du conteneur d'en-tête. Définissez simplement le paramètre de l'attribut data-role sur "footer".
Par exemple :

Le conteneur de pied de page a plus de flexibilité que le conteneur d'en-tête, ce n'est pas le cas. Comme le conteneur de titre, seuls deux boutons peuvent être placés, et les boutons ne sont pas placés en haut à gauche et à droite par défaut. Les boutons du pied de page sont disposés de gauche à droite par défaut, et il n'y a aucun moyen. pour placer plus de boutons.
Ajoutez simplement un class="ui-bar" au conteneur de pied de page pour transformer le pied de page en une barre d'outils, où vous pouvez ajouter des boutons soignés sans définir de style de mise en page.
Par exemple :


Si nous avons besoin d'un ensemble d'effets de lien, nous pouvons écrire comme ceci :

Copier le code

Le code est le suivant :