Résumé de l'utilisation des divers effets de commutation de pages et des boîtes de dialogue modales dans HTML5

Cet article introduit principalement l'utilisation de divers effets de commutation de pages et des boîtes de dialogue modales pour vous. Il introduit plus en détail les techniques d'utilisation de divers éléments de page de HTML5. C'est très pratique. Les amis qui en ont besoin peuvent y faire référence.

Cet article résume les différentes effets de commutation de pages et l'utilisation de la boîte de dialogue modale de HTML5 en détail. Partagez-le pour votre référence. L'analyse spécifique est la suivante:

La propriété de transition de données peut définir l'effet d'animation de la commutation de page.

Par exemple: <a href = index.html data-transition = pop> je vais pop </a>

Tableau des paramètres de transition de données:

Description du paramètre

Diapositive de droite à gauche à la page

Le glissement glisse vers le haut

coupé les glissements de haut en bas dans

POP se développe progressivement du centre

Fade apparaît progressivement

flip flip

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

Une boîte de dialogue modale est une couche pseudo-flottante avec une barre de titre arrondie et un bouton de clôture pour les événements exclusifs. Toute page structurée peut être utilisée pour implémenter des applications de dialogue modales à l'aide du lien Data-Rel = Dialog.

Par exemple: <a href = foo.html data-rel = dialog> ouvrir la boîte de dialogue </a>

Cet effet de commutation de page peut également utiliser l'effet des paramètres de transition de données de la page standard. Il est recommandé d'utiliser des paramètres POP, glissade et flip pour obtenir de meilleurs résultats.

Cette boîte de dialogue modale générera un bouton de fermeture par défaut, qui est utilisé pour revenir à la page parent. Sur les appareils avec des capacités de script faibles, vous pouvez également ajouter un lien avec Data-Rel = pour implémenter le bouton Fermer.

Pour les appareils qui prennent en charge les scripts, vous pouvez dire directement href = # ou data-rel = back pour réaliser l'arrêt. Vous pouvez également utiliser la méthode de fermeture intégrée pour fermer la boîte de dialogue modale, telle que: $ ('. Ui-dialog'). Boîte de dialogue ('close').

Étant donné que la boîte de dialogue modale est 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 nous retirer sur cette page. Par exemple, si vous cliquez sur un lien de la page A pour ouvrir la boîte de dialogue B, l'opération est terminée et la boîte de dialogue est fermée, puis passez à la page C. Pour le moment, vous cliquez sur le bouton de retour du navigateur, et vous reviendrez à la page A, pas la page B.

Les barres d'outils sont principalement utilisées dans l'en-tête, le pied de page et d'autres domaines, et sont utilisées pour soutenir et implémenter l'application des fonctions commerciales dans la page. JQuery Mobile fournit une solution relativement complète.

La barre d'outils est divisée en trois applications: barre d'en-tête, barre de page et navigation (barre de navigation).

Parmi eux, le titre et le pied de page sont appliqués de différentes manières dans la page. La barre d'outils par défaut est positionnée de manière en ligne. Cette méthode de positionnement peut atteindre une compatibilité maximale, y compris une bonne optimisation pour les appareils avec un mauvais script et une compatibilité CSS.

Une autre méthode consiste à le réparer, qui peut également être statique. Cette méthode de positionnement permet à la barre d'outils d'être toujours maintenue en haut ou en bas de l'écran. Et vous pouvez accepter des événements de clic pour afficher / masquer la barre d'outils, qui a atteint l'objectif de maximiser l'utilisation de l'espace d'écran.

Méthode d'implémentation: Ajouter une position de données = attribut fixe aux zones de titre et de pied de page.

Le conteneur de titre est un contrôle d'affichage de la zone d'en-tête de page, qui est principalement utilisé pour afficher le titre et la zone de fonctionnement principale.

Code de structure: