Nouvelles Chroniques d'Amethyste

Penser au Sens, pas au Verbe

Tutoriel Toastr

4 Commentaires

Toastr est outil JavaScript pour créer des popup de notification dans votre application. L’outil est tellement simple que je devrai parler de découverte plus que de tutoriel.

2015-09-20_12-27-53

L’éco-système

D’abord c’est John Papa (entre autres) qui est à la manœuvre, une valeur sûre dans le monde du Web.

Le site officiel se trouve ici:

http://codeseven.github.io/toastr/

Vous noterez qu’il dispose d’un CDN, d’un Nuget et peut être installé par Bower. Bref toutes les bonnes qualités!

Vous pouvez récupérer le source (et contribuer) depuis son Github:

https://github.com/CodeSeven/toastr

N’oubliez pas de constater qu’il y a une activité régulière, ce qui est toujours rassurant pour un outil.

Un dernier détail, Toastr a une dépendance avec JQuery. Il existe toutefois une version écrite pour AngularJS:

https://github.com/jirikavi/AngularJS-Toaster

Installer Toastr dans son application

L’installation de Toastr ajoute plusieurs fichiers à votre projet.

Deux Javascripts:

  1. toastr.js
  2. toastr.min.js

Des CSS:

  1. toastr.css
  2. toastr.less
  3. toastr.min.css
  4. toastr.scss

Pour utiliser Toastr vous ajoutez juste en adaptant le chemin à votre contexte:


<link href="~/Content/toastr.css" rel="stylesheet" />
<script src="~/Scripts/toastr.js"></script>

Premier essai

Puis un exemple de code:


<script type="text/javascript">
   $(document).ready(function () {
      toastr.info('La page est chargée!');
   });
</script>

Et ceci devrait s’afficher:

2015-09-20_12-08-26

Toastr c’est un peu plus que cela

Comme vous venez de le constater c’est pas difficile. Toastr apporte de nombreuses fonctionnalités et le plus intéressant: vous n’avez même pas besoin de lire la doc!

Le site suivant génère automatiquement vos scripts:

http://codeseven.github.io/toastr/demo.html

2015-09-20_12-11-53

Vous cochez les options qui vous intéressent et le code JavaScript s’affiche en bas. Par exemple avec les réglages de cet écran me donne le code suivant à intégrer dans mon application:

toastr["error"]("Je vais bien et vous?", "Salut d’Amethyste")

toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-left",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
});

Et côté affichage:

2015-09-20_12-16-54

Vous pouvez positionner la notification à différents endroits (pré-définis) de l’écran:

2015-09-20_12-18-59

On dispose de plusieurs types de fenêtre chacune caractérisée par une couleur:

2015-09-20_12-19-51

Tout ne peut se paramétrer depuis le site. Si par exemple vous devez ajouter une fonction de rappel au moment où la notification se ferme, il faudra ajouter soit même le code comme expliqué sur le site Github.

Et pour terminer un autre tuto en français:

http://www.softfluent.fr/blog/expertise/2017/04/12/Tout-ce-qu-il-faut-savoir-sur-Toastr-JS

 

Publicités

4 réflexions sur “Tutoriel Toastr

  1. Merci pour ce petit article. Je me renseigne pas mal sur le sujet, je ne connaissais pas du tout ToastrJS avant qu’une de mes collègues écrive elle aussi sur le sujet. Ils sont d’ailleurs assez complémentaire. Voici le lien si jamais :
    http://www.softfluent.fr/blog/expertise/2017/04/12/Tout-ce-qu-il-faut-savoir-sur-Toastr-JS
    Les options de la démo y sont d’ailleurs plutôt bien détaillés, c’était pas hyper easy à piger de suite.

  2. Merci beaucoup 🙂 ! Je vais essayer de voir pour faire pareil.
    Bonne journée

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