Maintenant, vous allez apprendre à implémenter la technologie AJAX avec vos boites de dialogue.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Couplez AJAX et vos Pop Up avec le Framework jQuery UI partie 3
Bonjour à tous et bienvenu sur Développement Facile.
Vous avez déjà eu deux cours sur les boîtes de dialogue, et là, c’est le troisième cours pour apprendre toutes les fonctionnalités des boites de dialogue, et devinez quoi, c’est le chargement du contenu de la boîte de dialogue via Ajax, via un fichier externe qui est très pratique.
Les boites de dialogue
Ça évite de surcharger votre document HTML de départ, d’une part, et de deux, ça s’affiche plus rapidement pour l’utilisateur car le document père, parents, est plus léger, il fait du chargement dynamique en fonction des besoins de l’utilisateur.
Comme je vous l’ai dit, vous pouvez ajouter une image dans le contenu de la boite de dialogue, vous pouvez mettre n’importe quelle balise HTML, vous pouvez utiliser du PHP pour récupérer les informations de vos bases de données et vous pouvez ajouter le contenu de votre boîte de dialogue via la technologie Ajax en changeant un fichier PHP.
Vous avez un exemple de toute façon, on va le voir ensemble dans un exemple complet de code source commenté. Vous pouvez bien évidemment ajouter des animations à l’ouverture de la boite de dialogue, à la fermeture, il suffit d’utiliser les options show et hide et de transmettre des animations que vous voulez voir.
Vous pouvez bien évidemment personnaliser le thème de votre boite de dialogue, thème rollers vous devez le connaitre par cœur à force, ce site, je le donne presque dans tous les cours.
On passe au code source ensemble. Là vous avez des boutons, une image, par exemple, si vous cliquez sur l’image ça l’agrandie, elle apparaît dans une boîte de dialogue, ou vous pouvez cliquer ici pour agrandir l’image avec une option, des animations sur l’ouverture et la fermeture de la boîte de dialogue. Là le contenu du serveur, si je fais afficher le debug vous verrez que on interroge le serveur ici, à chaque fois, et comment on fait ça avec le code, les boutons je vous les ai montré dans le cours précédent, modal resizable on va, ne pas autoriser le redimensionnement de la boîte de dialogue, ça c’est pour le titre en mettant une URL et une image, on définit la position de la boîte de dialogue, des animations, des animations sur la boîte de dialogue à l’ouverture et à la fermeture, la taille maximum mini de la boîte de dialogue, elle ne s’ouvre pas automatiquement, on implémente les options, et là ont créé deux boites de dialogue, une pour les images, une pour Ajax avec les différentes options qui seront appelées en fonction des clics sur les boutons, vous avez un bouton pour agrandir l’image, le clic sur l’image qui va ouvrir la boîte de dialogue, comment on gère ça ?
Regardez le lien a linking renvoie ici a link, à chaque fois que l’image est cliquée, vous avez une div complète Picture, on écoute le clic sur la div complète, et quand il y a un clic, on récupère l’URL de l’image avec la balise href, le titre et on ouvre la boîte de dialogue. Le deuxième bouton et on utilise les options de l’image, la source de l’image que l’on a récupérée donc le fichier source, et avec le titre de la boîte de dialogue, tout simplement. Des titres ici, bannières Développement Facile.
Vous avez la fonction Ajax, donc on utilise les options Ajax, elles sont définies ici, on charge un fichier, il y a du texte on fait un echo texte, vous pourriez très bien interroger une base de données avec ce fichier Ajax, là on définit des options Ajax et lorsqu’il y a un clic sur le bouton on utilise les options Ajax, alors que quand il y a un clic sur le bouton deux, on utilise les options image, quand il y a clic sur la div on utilise les options image, on vide la boîte de dialogue, on ajoute l’image, tout simplement. Voilà un peu comment ça fonctionne, là le chargement depuis Ajax, avec des animations, des animations qui sont définies ici, les animations elles sont définies ici, voilà, et là pour l’ouverture de l’image en grand, agrandissement de l’image.
Voilà vous savez utiliser les boites de dialogue, on a vu beaucoup d’options ensemble à travers les trois cours. Si vous avez des questions posez-les directement sous le cours vidéo, comme d’habitude sur Développement Facile, sous le cours vous trouverez le code source complet et commenté en téléchargement pour que vous puissiez l’utiliser dans vos sites Internet, je vous invite à aller voir dès maintenant la deuxième vidéo, il y a un lien au-dessus, vidéo 2, dans laquelle je vous propose de vous accompagner pendant quatre mois pour apprendre à utiliser les Frameworks jQuery, jQuery UI, le Framework Dojo, vous saurez les utiliser à travers plusieurs exemples, des exercices je vous aiderais en cas de difficultés, tout est expliqué sur la vidéo, cliquez sur la vidéo juste au-dessus ou juste en-dessous pour afficher la deuxième vidéo que je vous invite à voir dès maintenant et moi je vous dit à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple AJAX Pop Up
Et voici le code source commenté qui accompagne ce cours.
Téléchargement du code source Exemple AJAX avec une Pop Up jQuery UI
