Bootstrap - Plugin d'alerte

Les messages d'alerte sont principalement utilisés pour afficher des informations telles que des messages d'avertissement ou de confirmation aux utilisateurs finaux. En utilisant le plugin de message d'alerte, vous pouvez ajouter une fonctionnalité de rejet à tous les messages d'alerte.

Si vous souhaitez inclure cette fonctionnalité de plugin individuellement, vous aurez besoin du alert.js. Sinon, comme mentionné dans le chapitre Présentation des plugins d'amorçage , vous pouvez inclure le fichier bootstrap.js ou le bootstrap.min.js minifié .

Usage

Vous pouvez activer le rejet d'une alerte des deux manières suivantes:

  • Via data attributes - Pour ignorer via Data API, ajoutez simplement data-dismiss = "alert" sur votre bouton de fermeture pour donner automatiquement une fonctionnalité de fermeture d'alerte.

<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
   &times;
</a>
  • Via JavaScript - Pour ignorer via JavaScript, utilisez la syntaxe suivante -

$(".alert").alert()

Exemple

L'exemple suivant illustre l'utilisation du plug-in d'alerte via des attributs de données.

<div class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">
      &times;
   </a>
   
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

Options

Il n'y a pas d'options ici.

Méthodes

Voici quelques méthodes utiles pour le plugin d'alerte -

Méthode La description Exemple
.alerte() Cette méthode encapsule toutes les alertes avec une fonctionnalité de fermeture.
$('#identifier').alert();

Close Method .alert ('fermer')

Pour permettre la fermeture de toutes les alertes, ajoutez cette méthode.
$('#identifier').alert('close');
Pour permettre aux alertes de s'animer lorsqu'elles sont fermées, assurez-vous qu'elles .fade et .in classe déjà appliquée à eux.

Exemple

L'exemple suivant montre l'utilisation de .alert() méthode -

<h3>Alert messages to demonstrate alert() method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert();
      });
   });  
</script>

L'exemple suivant montre l'utilisation de .alert('close') méthode -

<h3>Alert messages to demonstrate alert('close') method </h3>

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<div id = "myAlert" class = "alert alert-warning">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Warning!</strong> There was a problem with your network connection.
</div>

<script type = "text/javascript">
   $(function(){
      $(".close").click(function(){
         $("#myAlert").alert('close');
      });
   });  
</script>

Essayez ce code en utilisant le Try itéditeur. Vous pouvez voir que la fonctionnalité de fermeture est appliquée à tous les messages d'alerte, c'est-à-dire ferme tout message d'alerte, le reste des messages d'alerte est également fermé.

Événements

Le tableau suivant répertorie les événements à utiliser avec le plugin d'alerte. Cet événement peut être utilisé pour se connecter à la fonction d'alerte.

un événement La description Exemple
close.bs.alert Cet événement se déclenche immédiatement lorsque la méthode d'instance close est appelée.
$('#myalert').bind('close.bs.alert', function () {
   // do something
})
fermé.bs.alert Cet événement est déclenché lorsque l'alerte a été fermée (attendra la fin des transitions CSS).
$('#myalert').bind('closed.bs.alert', function () {
   // do something
})

Exemple

L'exemple suivant montre les événements du plug-in d'alerte -

<div id = "myAlert" class = "alert alert-success">
   <a href = "#" class = "close" data-dismiss = "alert">&times;</a>
   <strong>Success!</strong> the result is successful.
</div>

<script type = "text/javascript">
   $(function(){
      $("#myAlert").bind('closed.bs.alert', function () {
         alert("Alert message box is closed.");
      });
   });
</script>