Créer une alerte avec jQuery
- Créer une alerte avec jQuery
- Utiliser le plugin jAlert pour créer des alertes
- Configurer le plugin jAlert
Ce tutoriel se concentrera sur la création ou l’ajout d’une alerte jQuery. La réponse rapide est d’utiliser jQuery alert() et de fournir le contenu à afficher à l’affût en tant que paramètre.
Créer une alerte avec jQuery
jQuery fournit plusieurs méthodes pratiques qui peuvent être utilisées pour exécuter diverses tâches dans votre application. L’une des meilleures méthodes pour afficher des notifications aux consommateurs consiste à envoyer un message d’alerte jQuery.
Lorsque vous développez un code, vous devez utiliser des messages d’alerte lorsqu’un bouton est enfoncé ou qu’un événement se produit.
Syntaxe:
Alert(Specify Content)
Les utilisateurs doivent spécifier tout contenu textuel qu’ils souhaitent afficher dans la boîte de message d’alerte dans le paramètre content.
Exemple:
<script>
$(document).ready(function () {
$("#alert-id").click(function () {
alert("Hello World! Welcome to upwork.");
});
});
</script>
Production:
Lorsque vous cliquez sur le bouton, il déclenche la fonction click() et affiche la fenêtre contextuelle affichant un message.
Bien que jQuery n’inclue pas de composant alert intégré pour créer des alertes modales, vous pouvez créer une superbe boîte d’alerte jQuery dans vos pages Web à l’aide de plugins.
Nous montrerons comment utiliser des plugins pour créer diverses alertes, telles qu’une alerte principale avec un message simple, un bouton OK et des alertes d’invite et de confirmation. Continuez à lire pour voir un exemple de signal qui inclut des composants HTML tels qu’un lien.
Utiliser le plugin jAlert pour créer des alertes
Vous pouvez utiliser le plug-in jAlert pour créer des alertes avec divers paramètres pour différents types d’alertes, par exemple, une alerte principale ou de confirmation avec une animation fermant l’avertissement et utilisant plusieurs boutons de couleur.
Ce plugin est également compatible avec les versions les plus récentes de jQuery. Vous pouvez télécharger la dernière version du plugin jAlert depuis ici.
Une alerte jQuery essentielle est faite dans cet exemple, incluant un bouton Good pour fermer la fenêtre d’alerte.
Voici l exemple de code. Vous pouvez enregistrer le fichier et l’exécuter dans votre navigateur.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jAlert.js"></script>
<link rel="stylesheet" href="jAlert.css" />
</head>
<body>
<h1>jQuery Alert</h1>
<div>
<button class="alertid">Simple jAlert</button>
</div>
<script>
$(".alertid").on("click", function (e) {
e.preventDefault();
var btn = $(this),
theme = "green";
$.jAlert({
title: "jAlert simple sample",
content: "Simple jAlert based on jQuery!",
theme: theme,
closeOnClick: true,
backgroundColor: "white",
btns: [{ text: "Good", theme: theme }],
});
});
</script>
</body>
</html>
La variable thème permet de changer la couleur de l’alerte. Vous pouvez utiliser différentes couleurs dans différentes situations.
De même, l’utilisateur peut utiliser le paramètre title pour définir le titre d’une boîte d’alerte. Vous pouvez écrire le message à afficher dans le paramètre content.
Pour cette démonstration, nous avons utilisé un fond blanc. Mais vous pouvez aussi utiliser du noir.
Configurer le plugin jAlert
Assez avec les démonstrations sur Internet; voici comment vous pouvez utiliser ce fantastique plugin dans votre projet web. En termes simples, vous devez inclure les bibliothèques de plugins dans la section <head> :
La première est la bibliothèque jQuery, suivie du fichier JS pour jAlert version 4, et enfin, le fichier CSS.
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
LinkedIn