Fonction Dialogue box JQUERY & JQUERY-UI

Dans cet article, je vous propose de réaliser une fonction Dialogue Confirm, nous permettant de faire des choix ainsi que de répondre à une question posé.
Pour ce faire vous devrez au préalable avoir téléchargé la bibliothèque de fonctions JQUERY ainsi que JQUERY-UI.

Afin d’améliorer l’expérience utilisateur d’un projet personnel, j’ai voulu créer un système me permettant d’afficher ainsi que de récupérer la réponse à une question posé.
Comme une confirmation de suppression etc..

Voila le résultat:

image

Le code fournit vous affichera le système sur une page vierge composé seulement de boutons.
A vous de l’intégrer dans votre contexte.

Le code HTML + L’appelle de la fonction :

image

Le code HTML

Rien de compliquer, un simple input avec un type= »button » et un id= »button ».

L’appelle de la fonction

L’appel de la fonction se fait en JQUERY.
On commence par définir l’élément avec l’identifiant « button » en t’en que bouton puis on ajoute un événement « Click » sur l’élément « button ».
On lui dit que au click sur l’élément « button », on initialise 3 variables (message, title et tabBoutons)
La variable message correspond au message qu’affichera notre modal.
La variable title correspond au titre de notre modal.
Et le tableau tabBoutons correspond au boutons de notre modal.
Ensuite on appelle la fonction en passant les différent paramètres.
Dans notre cas nous allons juste récupérer et afficher le résultat de la fonction.

La fonction JQUERY :

image image

La fonction dialog_confirm possède 4 paramètres.
Le titre, le message, le type ainsi que le tabsBoutons.
Il faut savoir 2 choses.

La premiere chose à savoir est que il existe 3 types :

  • YES_NO qui est une valeur par default et qui va nous afficher deux boutons, un boutons « Oui » et un autre « Non ».
  • OK qui lui va juste nous afficher un boutons « OK ».
  • CUSTOM qui lui va afficher les boutons définit dans notre tableau « tabBoutons ».

La deuxième chose à savoir est que le tableau « tabBoutons » ne sera prit en compte que si le type « CUSTOM » est saisit.

Dans cette fonction on va utiliser la fonction JQUERY « deferred » qui est une méthode asynchrone et va nous permettre d’attendre d’avoir une réponse pour retourner une valeur.
Le « switch » va nous permettre de déterminer le type de la dialog_confirm et ensuite en fonction du type la fonction va afficher différent boutons.

Et pour finir nous allons créer notre modal.

J’espère que cela vous aura aidé, je vous invite à aller voir mes autres projets en cliquant ici.

 

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s