Le framework JavaScript jQuery UI regorge de fonctionnalités très pratiques.
Vous allez apprendre à utiliser les boites de dialogue ou pop up alert !
Tout est dans la formation vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Créez des Pop-Up alert magnifiques avec le Framework JavaScript jQuery UI
Bonjour à tous et bienvenu sur Développement Facile.
On continue ensemble les cours dédiés au plug-in, à l’extension jQuery UI, dans ce nouveau cours vous allez apprendre à utiliser les fameuses boites de dialogue, en JavaScript vous connaissez la boîte alerte qui est moche, pas très intuitive, informative pour l’utilisateur, là on va remplacer cette boite alerte par une boîte de dialogue jQuery.
Présentation – Les boites de dialogue
Toutes les boites de dialogues sont redimensionnables et déplaçables, vous pouvez autoriser ou non l’utilisateur à la modifier, la taille de la boîte de dialogue et à la déplacer, il y a des options prévues pour ça, elle est construite à partir d’une simple balise div avec un Id auquel il faut appeler avec jQuery et utiliser la méthode dialog, et ça va transformer votre contenu de votre balise div avec un titre et le contenu dans la boite de dialogue, vous avez un petit exemple qui s’affiche sur la vidéo très simple.
Et vous avez différentes options qui vont avec la boite de dialogue, bien évidemment,
appendTo ça peut spécifier avec un élément la boîte de dialogue qui doit être jointe,
autoOpen c’est pour ouvrir automatiquement la boite de dialogue,
buttons vous pouvez rajouter des boutons à la boite dialogue, valider, annuler, tout simplement,
closeOnEscape vous pouvez autoriser la fermeture ou non de la boîte de dialogue en appuyant sur le bouton échape,
closeText c’est le texte associé au bouton de fermeture que vous pouvez traduire en français, ce qui peut être très pratique, il y a tout un tas d’autres options, dialogClass, draggable pour autoriser l’utilisateur à déplacer ou non la boîte de dialogue, height la hauteur de la fenêtre, hide pour mettre une animation lorsque l’utilisateur ferme la boite de dialogue.
Je vous laisserais lire, vous pouvez définir la taille de la boîte de dialogue, la hauteur maximum, la hauteur minimum, largeur maximum, largeur minimum, modal c’est les nouvelles pop-up qui s’ouvrent directement dans la page web en mettant un fond grisé, la couleur que vous souhaitez juste derrière, et ça bloque les actions de l’utilisateur sur l’arrière-plan, il peut interagir uniquement avec la boite de dialogue qui est en avant-plan, vous pouvez définir énormément de choses, la position de la boite de dialogue, vous n’êtes pas obligé de la centrer vous pouvez la mettre là ou vous le souhaitez sur l’écran, est-ce que vous autorisez la modification de la taille de la boite de dialogue par l’utilisateur et vous pouvez mettre une l’animation à l’ouverture de la boîte de dialogue.
Vous avez des méthodes close pour la fermer, destroy pour supprimer la boîte de dialogue, moveTop pour déplacer la boite de dialogue au bord supérieur de la fenêtre du navigateur, open pour l’ouvrir, vous pouvez très bien ouvrir la boite de dialogue sur un bouton dans votre site Internet, tout simplement, et les options vous pouvez paramétrer toutes les options, récupérer toutes les options de la boite de dialogue, modifier toutes les options, récupérer une seule option, modifier une seule option, vous avez tout un tas de possibilités offerte grâce au Framework jQuery.
Les événements – Les boites de dialogues
Pareil sur les événements, des événements sont déclenchés lorsque la boîte de dialogue se ferme lorsqu’elle s’ouvre, alors qu’elle est sur le point de se fermer, lorsqu’elle est déplacée, lorsque le déplacement de la boite de dialogue commence.
Vous avez tout un tas d’événements lorsque l’utilisateur met le focus sur la boite de dialogue, lorsque l’utilisateur redimensionne la boite de dialogue, tout est listé ici, c’est en français, vous avez des exemples pour facilement les implémenter dans votre code.
Exemple de boite de dialogue
Justement je vous montre un exemple de code source, pour créer une boite de dialogue, vous avez votre div ici, un bouton pour ouvrir la boîte de dialogue et c’est tout. Le contenu de la boite de dialogue et le titre ici, voilà, et après vous créez votre boite de dialogue ici, tout simplement, rien de bien compliqué, c’est extrêmement simplifié, très simple.
Vous pouvez ajouter un texte, un bouton, il y a un bouton valider ici, qui ferme la boite de dialogue dès que l’utilisateur appuie sur le bouton valider ça ferme la boite de dialogue, dès qu’il clique ici ça ferme la boîte de dialogue, dès qu’il appuie sur échap, ça ferme la boite de dialogue, vous pouvez ajouter une animation à l’ouverture de la fenêtre de la boîte de dialogue, vous pouvez faire tout un tas de choses, la boite de dialogue l’utilisateur peut la redimensionner exactement comme il veut, il peut également la déplacer, vous pouvez bien évidemment l’interdire en mettant false déplacement et redimensionnement, ça fait que si je recharge la page, j’ouvre la boîte de dialogue on ne peut plus la déplacer, on peut plus la redimensionner.
Si vous vous rappelez les calendriers c’est exactement la même chose, aussi simple à utiliser la boîte de dialogue avec tout un tas d’options pour la personnaliser.
Votre plan d’actions !
Maintenant c’est à vous de jouer, sous ce cours vidéo, sur Développement Facile, il y a le code source entièrement commenté que vous trouverez en téléchargement pour réutiliser dans votre site Internet et si vous voulez aller plus loin, regardez la deuxième vidéo, il y a un lien juste au-dessus de cette vidéo et juste en-dessous, ça va vous permettre de profiter de mon accompagnement individuel et personnalisé pendant quatre mois. Je vous invite à regarder la vidéo juste au-dessus, la deuxième vidéo, à la regarder et en attendant je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez le code source Pop Up jQuery UI
Et voici le code source jQuery UI pour utiliser le widget Pop Up.
Téléchargement du code source Pop Up avec le Framework jQuery UI
