{"id":25646,"date":"2021-06-10T18:47:00","date_gmt":"2021-06-10T15:47:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25646"},"modified":"2021-10-18T02:05:29","modified_gmt":"2021-10-17T23:05:29","slug":"sweetalert-un-beau-remplacement-pour-les-boites-de-dialogue-javascript","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/sweetalert-un-beau-remplacement-pour-les-boites-de-dialogue-javascript\/","title":{"rendered":"SweetAlert – Un beau remplacement pour les bo\u00eetes de dialogue JavaScript"},"content":{"rendered":"

JavaScript est int\u00e9gr\u00e9 \u00e0 tous les navigateurs. JavaScript fournit des bo\u00eetes de dialogue (alerte, confirmation, invite) qui sont disponibles dans tous les principaux navigateurs. Chaque navigateur affiche ces bo\u00eetes de dialogue diff\u00e9remment en termes d’interface utilisateur.<\/p>\n

Lors de la cr\u00e9ation d’une application, notre objectif principal est l’exp\u00e9rience utilisateur. Et quelque part, les bo\u00eetes de dialogue de JavaScript ne fournissent pas une bonne exp\u00e9rience utilisateur. En effet, sur chaque navigateur, ces bo\u00eetes ont une interface utilisateur diff\u00e9rente, ce qui rompt en quelque sorte la coh\u00e9rence de l’apparence.<\/p>\n

Dans cet article, nous discutons de SweetAlert,<\/a> qui remplace avantageusement les bo\u00eetes de dialogue JavaScript. En dehors de ces alertes de base, SweetAlert fournit beaucoup plus de messages de r\u00e9ussite\/d’erreur, de mod\u00e8les d’avertissement, de gestion Ajax dans les fen\u00eatres contextuelles, etc.<\/p>\n

Bo\u00eetes de dialogue SweetAlert<\/h3>\n

En utilisant SweetAlert, nous aurons un contr\u00f4le total sur le texte et les boutons des bo\u00eetes de dialogue. Nous pouvons modifier le texte du titre, le texte du bouton selon notre convenance.<\/p>\n

Vous trouverez ci-dessous quelques exemples de bo\u00eetes de dialogue SweetAlert.<\/p>\n

Bo\u00eete de dialogue d’alerte<\/strong><\/p>\n

\"SweetAlert<\/a><\/p>\n

Bo\u00eete de dialogue Confirmer<\/strong><\/p>\n

\"SweetAlert<\/a><\/p>\n

Bo\u00eete de dialogue Invite<\/strong><\/p>\n

\"SweetAlert<\/a><\/p>\n

Comment utiliser SweetAlert<\/h3>\n

L’utilisation de SweetAlert dans l’application est un processus simple. Cela nous oblige \u00e0 inclure leur fichier JS et nous sommes bons \u00e0 utiliser les m\u00e9thodes de la biblioth\u00e8que SweetAlert.<\/p>\n

Exemple de bo\u00eete d’alerte<\/h4>\n
<script src=\"\/\/unpkg.com\/sweetalert\/dist\/sweetalert.min.js\"><\/script>\n<script>\nswal(\"Hello world!\");\n<\/script><\/code><\/pre>\n
Lors de l’utilisation de SweetAlert, vous devez utiliser la swal<\/code>fonction pour appeler les diff\u00e9rents types de bo\u00eetes de dialogue. Le code ci-dessus affichera une fen\u00eatre contextuelle avec le texte "Hello world!".<\/p>\n
Nous pouvons \u00e9galement d\u00e9finir le titre modal puis le texte comme suit\u00a0;<\/p>\n
swal(\"Here's the title!\", \"...and here's the text!\");<\/code><\/pre>\n
Si vous souhaitez afficher une fen\u00eatre contextuelle sur la base de la nature de l’op\u00e9ration, passez le troisi\u00e8me argument. Le troisi\u00e8me argument peut \u00eatre \u00ab\u00a0succ\u00e8s\u00a0\u00bb, \u00ab\u00a0avertissement\u00a0\u00bb, \u00ab\u00a0erreur\u00a0\u00bb, \u00ab\u00a0info\u00a0\u00bb.<\/p>\n
swal(\"Good job!\", \"You clicked the button!\", \"success\"); \/\/success, warning, error, info<\/code><\/pre>\n
Essayez toutes les valeurs du troisi\u00e8me argument et vous obtiendrez une interface utilisateur diff\u00e9rente pour chacune d’elles.<\/p>\n
Exemple de bo\u00eete de confirmation<\/h4>\n
Pour utiliser la bo\u00eete de confirmation SweetAlert, utilisez le code ci-dessous\u00a0:<\/p>\n
swal({\n\u00a0\u00a0\u00a0\u00a0title: \"Are you sure?\",\n\u00a0\u00a0\u00a0\u00a0text: \"Once deleted, you will not be able to recover this record!\",\n\u00a0\u00a0\u00a0\u00a0icon: \"warning\",\n\u00a0\u00a0\u00a0\u00a0buttons: true,\n\u00a0\u00a0\u00a0\u00a0dangerMode: true,\n})\n.then((willDelete) => {\n\u00a0\u00a0\u00a0\u00a0if (willDelete) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Poof! Your record has been deleted!\", {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0icon: \"success\",\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Your imaginary file is safe!\");\n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n
Parfois, nous devons envoyer des requ\u00eates AJAX avec la bo\u00eete de dialogue de confirmation. Dans ce cas, nous envoyons une demande AJAX apr\u00e8s avoir cliqu\u00e9 sur le bouton de confirmation, puis traitons la r\u00e9ponse comme suit.<\/p>\n
swal({\n\u00a0\u00a0\u00a0\u00a0title: \"Are you sure?\",\n\u00a0\u00a0\u00a0\u00a0text: \"Once deleted, you will not be able to recover this record!\",\n\u00a0\u00a0\u00a0\u00a0icon: \"warning\",\n\u00a0\u00a0\u00a0\u00a0buttons: true,\n\u00a0\u00a0\u00a0\u00a0dangerMode: true,\n})\n.then((willDelete) => {\n\u00a0\u00a0\u00a0\u00a0if (willDelete) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0jQuery.get('ajax.php', function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(response == true) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Poof! Your record has been deleted!\", {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0icon: \"success\",\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0swal(\"Your imaginary file is safe!\");\n\u00a0\u00a0\u00a0\u00a0}\n});<\/code><\/pre>\n
Exemple de bo\u00eete d’invite<\/h4>\n
Une bo\u00eete de dialogue d’invite est tr\u00e8s rarement utilis\u00e9e sur le site Web. Cependant, si quelqu’un souhaite l’utiliser avec SwetAlert, utilisez le code ci-dessous.<\/p>\n
swal(\"Write something here:\", {\n\u00a0\u00a0\u00a0\u00a0content: \"input\",\n})\n.then((value) => {\n\u00a0\u00a0\u00a0\u00a0swal(`You typed: ${value}`);\n});<\/code><\/pre>\n
Ce sont les bases de la biblioth\u00e8que SweetAlert. Vous pouvez en savoir plus sur la documentation<\/a> SweetAlert .<\/p>\n
Articles Li\u00e9s<\/h4>\n