
Avec l’avènement des réseaux sociaux, les internautes sont habitués à recevoir des notifications provenant de leur sites favoris. Et il est souvent important d’ajouter cette fonctionnalité à ses propres projets.
Pines Notify est donc là pour vous. Ce plugin jQuery permet d’ajouter facilement des notifications complètes et design dans votre propre site.
De plus, de nombreuses fonctionnalités en font le meilleur plugin de gestion de notifications :
- Trois types de notifications : Information, Notification ou Erreur
- Effets visuels avec gestion du timing
- Boutons de fermeture et d’épinglage
- Supporte la mise à jour dynamique du texte, du titre, des icones, …
- Contrôle de la direction et déplacement horizontal ou vertical
- Support des title HTML
- Echappement HTML pour prévenir les attaques XSS
- Opacité variable
- Un Historique permettant d’examiner les notifications précédentes
Et il en existe encore bien d’autres.
Son intégration est, comme je l’ai expliqué précédemment, extrêmement simple. Il faut inclure jQuery (1.4 ou supérieur) et jQuery UI (seul le CSS est indispensable). Il faut aussi inclure les fichiers .js et .css de pines notify :
<!-- jQuery --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js"></script> <!-- jQuery UI le .js est nécessaire pour utiliser les effets css --> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> <!-- Pines Notify --> <script type="text/javascript" src="jquery.pnotify.js"></script> <link href="jquery.pnotify.default.css" rel="stylesheet" type="text/css" />
Il vous suffira ensuite d’utiliser les classes prédéfinies pour gérer vos notifications
<div class="pf-group ui-widget-content ui-corner-all">
<input value="Regular Notice" onclick="$.pnotify({
pnotify_title: 'Regular Notice',
pnotify_text: 'Check me out! I\'m a notice.'
});" type="button" />
</div>
Pour en savoir plus sur ce plugin, vous pouvez visiter le site officiel.
22
DéC
DéC






About the Author
Jeff est Consultant Maitrise et Développement .NET/PHP, avec de solides connaissances en Javascript (jQuery) et HTML5.