Accueil > jQuery > jQuery toast notification plugin

jQuery toast notification plugin

Dans un précédent article, nous avions vu comment gérer des notifications toast dans une application oob silverlight. (Vous retrouverez cet article ICI). Cette fois, nous allons étudier comment reproduire ce comportement dans le browser à l’aide de jQuery.
Pour cela, nous allons réaliser un plugin jQuery qui permet d’afficher une notification toast à partir d’une div quelconque.
Partons d’une page très simple qui ne contient qu’un bouton et une div qui sera utilisée pour la notification:

<input type="button" id="buttonTrigger" value="ouvrir un toast"/>
<div id="toast">
    Mon toast!
</div>

Nous allons y inclure jQuery à partir du CDN de Microsoft et notre futur plugin que nous appellerons jquery.toast.js:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.toast.js"></script>

Passons maintenant à la réalisation du plugin en lui même. Avant tout, qu’est ce qu’un plugin jQuery? C’est une extension de l’objet jQuery permettant de lui ajouter de nouvelles fonctions.
Ici, nous allons ajouter une fonction toast qui permettra d’initialiser la div qui contiendra la notification:

$.fn.toast=function(options){
    var opts = $.extend($.fn.toast.defaults, options);
    
    return this.each(function(){
        $this = $(this);
        $this.css('position','absolute')
            .css('bottom', opts.bottom)
            .css('right', opts.right)
            .css('width',opts.width)
            .css('height',opts.height)
            .hide();
        
        $triggers=opts.triggers;
        
        $triggers.each(function(){
            $(this).click(function(){ $this.trigger("show")});
        });
        
        $this.bind("show",function(){
            $this.slideToggle().delay(opts.delay).slideToggle();
        })
    });
};    

Cette fonction accompli plusieurs actions:
Elle initialise tout d’abord un objet options qui lui est passé en paramètre. On définit généralement dans un plugin jQuery un objet d’options par défaut qui contient tous les paramètres standards pour le plugin. L’utilisateur peut ensuite changer ces valeurs au moment de l’appel de la fonction ou directement en modifiant l’objet d’options par défaut. La ligne var opts = $.extend($.fn.toast.defaults, options); fait le merge entre l’objet options passé par l’utilisateur et celui qui est définit par défaut. Pour chaque valeur non définie par l’utilisateur explicitement, c’est la valeur par défaut qui sera utilisée. L’objet d’options par défaut de notre plugin sera le suivant:

$.fn.toast.defaults={
    bottom:"0",
    right:"30px",
    triggers:[],
    delay: 2000,
    width: "200px",
    height: "50px"
};

Il permet de définir la position de la notification ainsi que sa taille, le temps pendant lequel elle restera affichée et un tableau de triggers qui déclenchent la notification au clic.

Après avoir défini tous les paramètres du plugin, la fonction toast retourne l’objet jQuery courant après avoir appliqué des transformations à tous les éléments qu’il contient grâce à la fonction each. Cela permet à l’utilisateur de chaîner d’autres instructions après l’appel à la fonction toast.
Chaque élément contenu dans l’objet jQuery est ici initialisé pour devenir une notification toast. L’élément est donc déplacé à l’endroit défini pour les notifications en manipulant sa css puis caché en attendant d’être déclenché.
Pour chaque trigger, on lève un évènement « show » au clic et on abonne la div de notification à cet évènement « show » pour déclencher la notification.

A ce stade, la notification se déclenchera au clic sur n’importe lequel des triggers définis. Ce n’est pas suffisant il faudrait pouvoir la déclencher par code en appelant directement une fonction jQuery sur la div de notification.
On définit donc une autre extension à l’objet jQuery showToast qui lève elle aussi l’évènement « show »:

$.fn.showToast=function(){
    return this.trigger("show");
}

Notre plugin est maintenant prêt à être utilisé. Ajoutons donc les appels correspondants dans la page html:

<script>
    $(document).ready(function(){
        $("#toast").toast({
            triggers:$("#buttonTrigger")
        }).showToast();
        
        
    });
</script>

Cet appel initialise notre div comme étant une div de notification et définit notre bouton en tant que trigger.
Un appel à showToast est chaîné, la page affichera donc une notification au chargement puis à chaque clic sur le bouton.

Vous pouvez voir cet exemple en action ICI et le code ICI

Le but étant plus de vous montrer comment réaliser votre propre plugin que de réaliser un vrai plugin gérant les toasts, nous sommes ici partis de zéro. Bien sur, il existe des tas de plugins gérant les toasts tout faits avec des fonctionnalités bien plus avancées. Vous en trouverez toute une liste sur http://plugins.jquery.com.

La prochaine étape pour arriver à avoir des notifications pilotées par silverlight dans le browser sera de dynamiser le contenu de la div de notification et de faire intéragir ce plugin avec silverlight. Nous verrons ça dans un prochain article.

Enjoy…

Étiquettes : ,

Laisser un commentaire

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 )

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 )

Photo Google+

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

Connexion à %s

%d blogueurs aiment cette page :