Aller au contenu

La technique pour créer une pop up avec le framework jquery mobile

Les pop up fournissent des informations très utiles à l’utilisateur. Comme les fenêtres d’alerte JavaScript, elles bloquent la navigation.

Apprenez comment créer rapidement des Pop Up ergonomiques avec le framework jQuery Mobile.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

La technique pour créer une pop up avec le framework jQuery mobile

Bonjour à tous et bienvenu sur Développement Facile.

Cette fois vous allez apprendre à utiliser les fameux pop-up, pas les pop-up moches qui s’affichaient avec une nouvelle page sur votre navigateur avant, non, des pop-up qui s’intègrent directement dans la page, dans une div, et elles apparaissent dans la même page, au-dessus du contenu dans vos applications web.

Les pop-up

Les pop-up permettent de donner des informations à l’utilisateur, c’est beaucoup mieux qu’une boîte de dialogue JavaScript alerte, qui n’est pas très pratique, pas très jolie mais c’est le même principe de fonctionnement. Elles sont très utiles dans les applications Web pour mobile, par exemple pour demander la confirmation d’une action, êtes-vous sur de vouloir aller là ? Prévenir l’utilisateur quand il va déclencher une action, afficher un message, présenter des options, il faut savoir qu’il y a deux façon pour créer une pop-up.

Les pop-up – méthodes 1

Dans la première solution, vous créez votre page jQuery Mobile, comme d’habitude, avec du contenu, soit avec un fichier HTML externe, soit avec le procédé jQuery Mobile avec la div data-role=page.
Et ensuite vous ajoutez l’attribut data-rel=dialog un lien vers la page ou vers la div, conçu pour ça. Vous aurez votre code source, votre page avec le code jQuery Mobile, à un moment vous aurez href=#dialogue avec l’attribut data-rel=dialog comme vous voyez sur votre écran, et ça va faire référence à une div, et cette div va s’afficher dans une pop-up. Dans la pop-up, bien évidemment, vous avez la possibilité de mettre des images, faire tout ce que vous voulez.

Les pop-up – méthode 2

Dans la deuxième méthode, vous positionnez l’attribut data-role=dialog dans la div à la place de data-role=page, là vous avez un exemple de code source, et ça va justement afficher le contenu de la fenêtre de dialogue. Dans ce cas, il n’est pas nécessaire d’ajouter l’attribut data-rel=dialogue au lien qui pointe vers la fenêtre ce sera fait automatiquement.

Les pop-up

La fenêtre de dialogue contient une icône de fermeture dans son entête, avec une pression du doigt sur celle-ci, jQuery Mobile ferme la pop-up et retourne à la page qu’il a ouverte. Vous pouvez modifier le texte de l’infobulle en ajoutant l’attribut data-close-btn-text par exemple votre texte à la div comprenant la pop-up, je vous ai mis un exemple de code source, pareil sur la vidéo, et cette pop-up peut également être fermée avec un lien, dans la pop-up via un bouton en utilisant l’attribut data-rel=back, pour revenir en arrière.

Par défaut, la pop-up s’ouvre avec une transition de type pop, et bien évidemment vous pouvez choisir la transition pour ouvrir la pop-up grâce à l’attribut data-transition que vous avez déjà vu dans les cours précédents. Il suffit de rajouter data-transition cet attribut-là avec le nom de la transition flip, slide, slideOn, etc. sur le lien, sur la balise href pour afficher votre pop-up, tout simplement.

Exemple d’application

Je vous montre un exemple de code source, alors vous avez ici, l’affichage avec toujours j’ai laissé le menu, un bouton, et ici il y aura la pop-up qui va s’afficher avec le petit effet, on peut la fermer ici, ou on peut la fermer en cliquant sur le bouton valider. Alors le code comment ça se passe ?
Vous avez un bouton ici, pour la pop-up, je vais sauter quelques lignes pour que ce soit plus lisible, #confirmation ici, data-role dialog, j’ai utilisé la deuxième méthode, le contenu de la pop-up, vous pouvez mettre une image, balise h1, du texte, un bouton, voilà, ici un bouton, transformé en bouton le lien, et il se met à la taille du texte, la largeur du bouton s’adapte automatiquement en fonction de la taille du texte, et une transition de type flip. Ca va appeler la pop-up, qui est ici, on met ce que l’on veut, et le texte pour revenir à home, à home, c’est ici, réafficher la page home, tout simplement, sur le bouton valider, il y avait la solution de base, bien évidemment, que je vous ai expliqué dans le cours, après vous choisissez selon vos préférences.
J’affiche la pop-up, je clique sur valider, on revient à la page d’accueil avec une transition, évidemment, différente, slideUp elle arrive vers le haut, et là on était en flip, donc elle fait un tour sur elle-même.

Votre plan d’actions !

Maintenant c’est à vous de jouer, vous pouvez maintenant rajouter des pop-up très facilement dans vos applications Web pour les mobiles, les smartphones, les tablettes. Vous retrouverez le code source sous ce cours vidéo comme d’habitude, si vous avez des questions posez-les également sous cette vidéo, si vous voulez aller plus loin dans la maitrise, l’utilisation du framework jQuery, jQuery UI, jQuery Mobile, et Dojo, allez voir la deuxième vidéo, il y a une image cliquable au-dessus de cette vidéo, ou alors à la fin de cette vidéo il y aura un lien cliquable qui va s’afficher, vous attendez la fin de la vidéo, elle est finie, et le lien s’affiche et vous aurez accès à la deuxième vidéo, où vous pourrez aller plus loin avec le framework jQuery. En attendant je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple de Pop Up jQuery Mobile

Et voici le code source commenté pour créer des boites de dialogue alert avec le framework jQuery Mobile.

Téléchargement du code source Exemple de Pop Up avec jQuery Mobile

Cliquez ici pour télécharger le code source Exemple de Pop Up avec jQuery Mobile

Téléchargement du code source Démonstration des possibilités de jQuery Mobile

Cliquez ici pour télécharger le code source Démonstration des possibilités de jQuery Mobile

Posez vos questions sur ce cours

Utilisez la zone commentaires pour poser toutes vos questions sur ce cours jQuery Mobile.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>