Et voici la suite du cours précédent sur les Pop Up jQuery Mobile. Dans ce nouveau cours, vous allez apprendre les options avancées pour personnaliser vos boites de dialogue jQuery Mobile.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Les stratégies avancées des fenêtres de dialogue avec le framework jQuery Mobile
Bonjour à tous et bienvenu sur jQuery Mobile.
Là ensemble on va voir la suite du cours dédié aux pop-up, dans le cours dernier je vous avait appris à faire apparaitre un pop-up sur votre application web, vous avez votre page, il y avait une transition, et la pop-up qui apparaissait. Dans ce cours, vous allez aller plus loin, la page va rester et elle va s’afficher juste par-dessus, sans transition. Comme ça vous aurez le choix pour l’affichage de vos pop-up, tout simplement.
Les pop-up discrets
Comme je vous l’ai dit, vous pouvez créer des pop-up un peu plus discrets, sans transition, elles vont s’afficher par-dessus, et le contenu en-dessous sera grisé. Il faut d’abord créer une div qui contient le contenu, bien évidemment, et cette div possède l’attribut data-role=popup, et avec un identifiant. Je vous ai mis un exemple de code source, data-role=popup id pop1, et le contenu du pop-up, tout simplement. Ensuite le pop-up est associé à un lien qui, lui, possède l’attribut data-rel=popup, donc évidemment il y a le même id #pop1 avec l’id de la div, et l’attribut data-rel=popup ça va ouvrir le message et ça va afficher le pop-up.
Les pop-up peuvent être affichés sans les bords arrondis avec l’attribut data-corners=false, vous avez déjà vu cet attribut utilisé dans les boutons, et sans ombre avec data-shadow=false et vous connaissez cet attribut par cœur, c’est le même que pour les boutons.
Je vous ai mis encore un exemple de code source, après l’utilisateur il a le choix pour fermer le pop-up, soit il appuie sur un bouton valider fermeture, soit sur le bouton fermeture de l’écran un bouton fermer, ou alors sur la touche échappe de son clavier ça va fermer le pop-up, ou alors en dehors du pop-up et ça va également fermer le pop-up.
Là je vous ai mis un exemple de code source avec toutes les options après c’est vous qui définissez la façon de fermer le pop-up.
Vous pouvez ajouter un effet de transition dans la pop-up avec l’attribut data-transition que vous commencez à bien connaitre, dans plusieurs cours vous l’avez déjà vu, je vous ai mis un exemple de code source, vous pouvez aussi définir la position du pop-up avec l’attribut data-position, je vous ai également mis un exemple de code source, l’attribut data-position-to peut prendre trois valeurs, origin ça positionne le pop-up directement sur le lien d’ouverture du pop-up, sa position par défaut, Window ça va centrer le pop-up dans la fenêtre du navigateur, et sélecteur CSS ça positionne le pop-up sur l’élément sélectionné, dans l’exemple data-position=#ici, ça va positionner directement le pop-up sur l’élément, la balise div avec l’identifiant ici.
Vous avez aussi, il faut savoir que lorsque jQuery créé un pop-up il utilise plusieurs éléments, le pop-up lui-même, son contenu, et une div qui recouvre tout le document overlay, en anglais overlay ça recouvre tout le document avec un voile semi transparent gris, et il y a le pop-up par-dessus. Pour faire ce voile semi transparent gris, il y a deux attributs qui peuvent être utilisés, un sur le pop-up avec data-theme, et l’autre sur la div avec data-overlay-theme et ces deux attributs s’appliques en complément de l’attribut data-role=popup.
Je vous ai mis un exemple de code source, la pop-up ce sera data-theme avec le thème de type A. Je vous ai dit les thèmes ce sont des lettres de A à Z, ce sont des nuances du CSS jQuery Mobile, et data-overlay c’est un thème A, vous choisissez aussi un nuancier.
Exemple d’application
Je vous montre un exemple de code source, ce sera beaucoup plus parlant, alors c’est le même code que tout à l’heure, que le dernier cours, sauf que la pop-up s’affiche ici par-dessus, et voilà, la fermeture, je clique ici, je clique sur le bouton, je clique sur valider, ou sur le bouton échappe, et le contenu est bien grisé en-dessous, vous avez vu il n’est pas sélectionnable, si je clique, il faut que je clique deux fois, ici, et il y a toujours un effet bien sympathique que vous pouvez choisir pour le pop-up. Alors le code qu’est-ce que c’est ?
#pop-up1 comme je vous l’ai dit, avec la transmission, rôle-bouton, position to Window c’est pour centrer le pop-up, et le pop-up il est ici, avec l’overlay thème A, la classe UI content et le bouton de fermeture qui revient sur home. Très simple à utiliser les pop-up, il faut juste comprendre le système href identifiant à l’identifiant de la div, et ne pas oublier data-role=popup.
Là vous pouvez rajouter des transitions si vous le souhaitez.
Votre plan d’actions !
Voilà maintenant c’est à vous de jouer, vous retrouverez sous ce cours vidéo le code source, si vous avez des questions posez-les directement sous ce cours vidéo, ensuite, si vous voulez aller plus loin, je vous invite à regarder la deuxième vidéo, il y a une image cliquable, ou à la fin de cette vidéo, il y a un lien cliquable qui va apparaître, vous attendez la fin de la vidéo, le lien apparait, vous cliquez sur le lien, et je vous donne rendez-vous dans la deuxième vidéo pour aller plus loin avec le framwork jQuery Mobile. A très vite sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple de Pop Up jQuery Mobile
Et voici le code source commenté avec les options des Pop Up jQuery Mobile.
Téléchargement du code source Exemple de Pop uP jQuery Mobile
