Et voici la suite du cours précédent sur les boites de dialogue jQuery UI.
Cette fois, vous allez apprendre les options avancées pour personnaliser vos Pop Up jQuery UI.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Utilisez le potentiel du Framework JavaScript jQuery UI pour créer vos Pop Up !
Bonjour à tous et bienvenu sur Développement Facile.
On continue ensemble à découvrir toutes les options des boites de dialogue, vous avez eu un cours précédent pour commencer à utiliser ce widget jQuery UI dans vos sites Internet.
Les boites de dialogue
Là on va voir, aller un peu plus loin, par exemple, vous allez apprendre à supprimer la barre de titres, tout simplement en faisant un $ ui dialog-titlebar hide, pour masquer la barre de titre, vous pouvez également ajouter une image dans la barre de titres, ça peut être très sympa, vous savez qu’une image parle mieux que 1000 mots donc l’image dans votre barre de titre c’est beaucoup plus intuitif et parlant à votre internaute, et vous pouvez choisir, bien évidemment, la position de la boîte de dialogue, vous êtes pas obligé de centrer, vous pouvez la mettre en haut, à gauche, à droite, là où vous le souhaitez, et vous pouvez bien évidemment, définir la taille de la boîte de dialogue avec les options width, height, les tailles maximum, les tailles minimum tout ça, ça se fait sous forme d’un tableau qui contient toutes les options que vous transmettez à la boîte de dialogue, vous avez un exemple qui s’affiche sur votre écran.
Vous pouvez ajouter des boutons à la boite de dialogue, un bouton pour la fermer, pour valider, bien évidemment, chaque fois qu’il y a une action, un clic sur ce bouton vous pouvez effectuer du code JavaScript pour modifier par exemple par un fichier PHP inséré dans une base de données, les informations que l’utilisateur à sélectionnées, et l’option modal qui rajoute une couche grisée entre le fond de votre page web et la boite de dialogue, donc le fond n’est plus sélectionnable par l’utilisateur, il peut juste interagir avec la boîte de dialogue, c’est très pratique pour générer des pop-up dans une page Web, c’est beaucoup utilisé.
Vous avez l’option beforeClose qui permet d’ajouter une action avant la fermeture définitive de la boîte de dialogue, par exemple une confirmation, voulez-vous vraiment fermer la boite de dialogue.
Vous avez une option, la boite de dialogue pour être ouverte sur le clic d’un bouton, vous l’avez vu dans le cours précédent, je vous ai montré comment ouvrir la boite de dialogue sur un clic.
Qu’est-ce que vous pouvez, vous pouvez faire tellement de choses avec la boîte de dialogue, vous pouvez masquer avec le CSS, le bouton fermeture, tout est expliqué, bouton, onclic sur le bouton ouvrir, la boite de dialogue s’ouvre, vous pouvez afficher un message, il y a énormément de possibilités.
Exemple de boite de dialogue
On voit tout ça ensemble avec un exemple de code source, là on ajoute les boutons, le bouton fermer, vous ouvrez la boite de dialogue, on affiche un message, on écoute des éléments, la boite de dialogue est ouverte, la boîte de dialogue est fermée, sinon lorsque la page s’ouvre, on attend des actions de l’utilisateur, tout ça, ça se fait grâce à des actions, on écoute des événements, open et close, et on change le statut, vous avez une div qui s’appelle statut ici.
En attente des actions de l’utilisateur, là, le bouton pour ouvrir la boîte de dialogue, et le contenu de la boite de dialogue. Le titre est défini ici, avec une image, remarquez l’image avec un lien ici, ça renvoie sur Développement Facile, de la boite de dialogue, quand on clique, vous pouvez faire énormément de choses avec la boite de dialogue, vous pouvez la positionner, la boite de dialogue est positionnée ici, vous pouvez définir la taille de la boîte de dialogue, le clic sur le bouton qui ouvre, vous avez vu énormément de possibilités avec la boite de dialogue, définir sa taille, les tailles maximum, les tailles minimum qui ont été défini grâce aux options qui sont ici, voilà.
Votre plan d’actions !
Maintenant c’est à vous jouer, à vous d’utiliser des boites de dialogue si vous en avez besoin dans vos sites internet, si vous avez des questions, posez-les directement sous la vidéo, comme d’habitude sur Développement Facile sous ce cours, vous trouverez le code source commenté en téléchargement, que vous pouvez réutiliser dans vos applications Web, et je vous propose la vidéo 2, il y a un lien juste au-dessus de moi, une image, ou juste en dessous, vous allez profiter de mon accompagnement individuel et personnalisé pour tout connaître des Frameworks jQuery, l’extension jQuery UI, le Framework Dojo pendant quatre mois, je vous aide à tout, à savoir utiliser ces Frameworks, les possibilités immenses de ces Frameworks pour développer beaucoup plus rapidement et efficacement des sites web que vos utilisateurs adorent, alors cliquez sur l’image vidéo deux, ici, allez voir la vidéo deux et moi je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple Pop Up jQuery UI
Et voici le code source de l’exemple de boite de dialogue avec le Framework jQuery UI.
Téléchargement du code source Widget Pop Up avec le Framework jQuery UI
