21
FEV

Noty - Un plugin jQuery pour créer des notifications avancées

Publié le 21/02/12 à 09h41 par DJo

Noty est un plugin jQuery permettant de créer et gérer de manière avancée des notifications sur vos sites web.

Noty est un plugin jQuery permettant de créer et gérer de manière avancée des notifications sur vos sites web.

Envoyer des alertes, messages de confirmation ou d'erreur est essentiel dans un site web pour ne pas perdre l'utilisateur.

Et plutôt que d'utiliser des alert ou confirm javascript ... (qui le fait encore ?), autant utiliser un plugin jQuery qui le fait bien non ?

Noty permet de créer facilement des notifications positionnées à différents endroits:

  • Header
  • Footer
  • Centre
  • Coin haut gauche
  • Coin haut droit
  • Centré en haut
  • ...

Il suffit de jouer sur l'option layout pour modifier le positionnement de la notification.

Il est possible de créer plusieurs types de notification que l'on peut ensuite personnaliser en CSS:

  • Alerte
  • Erreur
  • Succès
  • Confirmation

Il existe une multitude d'option, comme rendre les alertes modales, gérer les délais de disparition auto, gestion du thème... je vous laisse consulter la doc du plugin qui est claire et précise.

Noty permet aussi de gérer une file d'attente des notifications pour ne pas en afficher 3 au même endroit, mais seulement une fois que la précédante disparait. Pratique!

Le plugin dispose aussi d'un outil de génération du code, pratique pour bien démarrer:

Noty générateur

Et pour finir, un aperçu du code à mettre en place:

noty({
    "text":"Mon texte de notification !.", 
    "layout":"topCenter", 
    "type":"error", "textAlign":"center", 
    "easing":"swing", "animateOpen":{"height":"toggle"}, 
    "animateClose":{"height":"toggle"}, 
    "speed":"500", 
    "timeout":"5000", 
    "closable":true, 
    "closeOnSelfClick":true
});

A tester dans vos futurs projets.

 

Site Officiel

Baraguiné par darkstars le 21/02/12 à 12h28
darkstars via Twitter
Excellent ^^ merci fdw :o)
Baraguiné par tsunamichups le 22/02/12 à 14h15
tsunamichups sur La Ferme du Web
Très jolie
Merci
Baraguiné par romane le 28/02/12 à 12h44
romane sur La Ferme du Web
il est très intéressant se tuto, bravo et bonne continuation :)
Baraguiné par le 06/05/14 à 18h02
je veux afficher un message lorsque je clique sur un lien hypertexte en utilisant ce plugin. Aidez moi je sais pas où je dois mettre le code.
Merci

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web