Résumé des divers effets de changement de page HTML5 et des compétences du didacticiel d'utilisation de la boîte de dialogue modale_html5

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 :

Copier le code

Le code est le suivant :

Page Title

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 :

Copier le code

Le code est le suivant :

Annuler

Modifier le contact

Enregistrer

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 :

Copiez le code

Le code est le suivant :

$.mobile.page.prototype.options.backBtnText = "previous"

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 :

Copier le code

Le code est le suivant :

Footer content

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 :

Copier le code

Le code est le suivant :

Supprimer
< ;a href="index.html" data-role="button" data-icon="plus">Ajouter
Haut

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

Copier le code

Le code est le suivant :

SupprimerAjouter
Haut
Bas

Conseils : Plusieurs pages peuvent utiliser le même pied de page en utilisant l'attribut data-id.

Navigation

Le conteneur de navigation est un contrôle de groupe de boutons pouvant contenir jusqu'à 5 boutons par ligne, en utilisant un div avec l'attribut data-role="navbar"
pour contenir ces boutons.
Exemple :

Copier le code

Le code est le suivant :

• Un


• Deux

dans le bouton par défaut Ajouter class="ui-btn-active"
Si le nombre de boutons dépasse 5, le conteneur de navigation s'affichera automatiquement sur plusieurs lignes avec le numéro approprié.

Bouton

Vous pouvez déclarer n'importe quel lien sur la page comme étant le style d'affichage du bouton via data-role="button". Afin d'unifier le style, le framework formatera automatiquement les boutons de classe de formulaire en boutons de style jQuery Mobile lorsque la page est chargée. Il n'est pas nécessaire d'ajouter l'attribut data-role.
Le framework contient un ensemble d'icônes couramment utilisées qui peuvent être utilisées pour les boutons. Utilisez les paramètres de l'attribut data-icon pour définir et afficher différents effets d'icône.
Par exemple :

Copier le code

Le code est le suivant :

Supprimer

Liste des paramètres natifs des icônes de données

En plus d'afficher l'icône à gauche par défaut, vous pouvez également utiliser l'attribut data-iconpos pour définir la relation de position entre l'icône et le texte.
Liste des paramètres data-iconpos :

Effet de paramètre :
l'icône de droite est sur le côté droit du texte
l'icône du haut est au-dessus du texte
l'icône du bas est en dessous du texte
l'attribut data-iconpos="notext" permet le bouton pour masquer le texte.

Styles en ligne

Par défaut dans le cadre, les boutons sont exclusifs horizontalement et adaptatifs horizontalement en fonction de la largeur de l'écran. Cependant, dans nos applications, nous avons souvent besoin d'afficher plusieurs boutons sur une seule ligne. fonctionnalité appelée inline L'attribut mode est
data-inline="true".
Par exemple :

Copier le code

Le code est le suivant :

Annuler
Enregistrer

Groupe de boutons

Le framework jQuery Mobile peut afficher plusieurs boutons en groupes, et data-role="controlgroup" est utilisé pour montrer la relation compacte entre les boutons. Par exemple :

Copier le code

Le code est le suivant :

Oui

Peut-être

Si le bouton est requis Pour la disposition horizontale, vous pouvez ajouter l'attribut data-type="horizontal".

Formulaire de demande

Le framework jQuery Mobile encapsule de nouvelles formes d'expression pour les éléments de formulaire HTML natifs et optimise le fonctionnement des appareils à écran tactile. L'élément de formulaire sera automatiquement rendu dans un élément de style jQuery Mobile dans la page du cadre. L'utilisation de l'élément
form est la même que la méthode HTML par défaut. Vous pouvez également utiliser les méthodes Post et get pour soumettre des données. Cependant, il convient de noter que le nom de l'ID de l'élément n'est pas autorisé à apparaître dans. la même page dans la spécification conventionnelle. Dans jQuery Mobile, puisqu'il permet à plusieurs pages d'exister dans le même DOM, il est recommandé que le nom d'ID de l'élément de formulaire soit unique dans l'ensemble du projet pour éviter les erreurs causées par des problèmes d'ID.
Par défaut, le framework restituera automatiquement le style de l'élément de formulaire dans la page standard. Une fois rendu avec succès, cet élément de contrôle pourra être utilisé à l'aide des fonctions de jQuery. Dans certains cas, nous devons utiliser l'élément de formulaire HTML natif. Afin d'empêcher le framework mobile de restituer automatiquement cet élément, nous introduisons un paramètre de contrôle "aucun" dans l'attribut data-role du framework. L'utilisation de ce paramètre d'attribut entraînera l'affichage de l'élément dans son état HTML natif.
Par exemple :

Copier le code

Le code est le suivant :

A
BC

Liste des applications

La liste d'informations est un contrôle relativement fréquemment utilisé dans les applications de développement. Elle est utilisée pour l'affichage des données, la navigation, la liste de données, etc. Afin de s'adapter aux différents contenus d'information, les listes sont également présentées sous diverses formes.
La structure du code de la liste est implémentée dans les listes ordonnées et non ordonnées Tant que vous déclarez data-role="listview" sur ul ou ol, vous pouvez laisser le cadre s'afficher sous la forme d'une liste, par exemple :

Copier le code

Le code est le suivant :

• Acura




• BMW

Si vous devez ajouter des données à la liste, vous devez exécuter la méthode rafraîchir() pour mettre à jour la liste une fois les données chargées.
Par exemple :

Copier le code

Le code est le suivant :

$('ul').listview('refresh');

Ce qui précède sont les règles de base pour utiliser jQuery Mobile pour créer des interfaces.

J'espère que cet article sera utile à la conception de la programmation HTML5 de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn