Ambiance, un plugin jQuery de notifications simple et efficace

1 mar

Ambiance, notification plugin pour jQuery

Aujourd’hui, il existe des dizaines et des dizaines de plugins jQuery permettant d’afficher des notifications, un des plus connus et plus complet est certainement Noty. Aujourd’hui nous allons présenter Ambiance, un plugin simple, léger et rapide à mettre en place.

La mise en place d’Ambiance est très simple il suffit d’inclure jQuery ainsi que le plugin

<script type="text/javascript" src="/js/jquery-1.9.1.js"></script>
<link href="/css/jquery.ambiance.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery.ambiance.js"></script>


Pour l’initialisation et l’affichage des notifications, c’est très simple, la seule information obligatoire est le message à afficher :

$.ambiance({message: "Texte à afficher à l'utilisateur."});


Pour déterminer le temps d’affichage de la notification il suffit d’utiliser le paramètre timeout, qui définit la durée d’affichage en secondes

$.ambiance({message: "Cette notification sera affichée 10 secondes.", "<code>timeout</code>" : 10});


Dernier point intéressant, la personnalisation des notifications, pour cela, il faudra utiliser le paramètre type, le plugin possède trois types à savoir :

  • default : Notification noire
  • success : Notification verte
  • error : Notification rouge
$.ambiance({message: "Action réalisée avec succès.", "type": "success", "<code>timeout</code>" : 10});


Il est aussi possible de créer des types personnalisés en créant des classes CSS ayant comme nom « ambiance-nom_du_type », il est aussi possible de changer complètement l’apparence du plugin en éditant ou surchargeant les propriétés CSS.

Site officiel

Commentaires clos.