Thierry POINOT - Portfolio

Un petit plugin jQuery permettant d'afficher un message de notification.

Nécessite jQuery, jQuery-ui-core, jQuery-ui-Effects-core, jQuery-ui-Effects-Pulsate.
Ou encore le script complet contenant tous les packages de jQuery-UI

Billet en cours de rédaction

Depuis cet été, je découvre jQuery et son extraordinaire facilité de programmation...

Récemment j'ai eu besoin pour une applis d'afficher des messages pour confirmer à l'utillisateur son action.

Et je me suis fait une fonction notification() qui permet d'afficher un message de notification à l'utilisateur.

		function notification (html_id, css_class, msg) {
			$(html_id).hide('pulsate', {times: 1}, 0, function() {
				$(this).html('<span class="'+css_class+'">'+msg+'</span>');
				$(this).show('pulsate', {times: 3}, 1000, function() {
					var self = this;
					window.setTimeout(function() {
						$(self).hide('pulsate', {times: 1}, 1000);
						$(self).html('');
					}, 2000);
				});
			});
		}

Et puis pour faire un peu plus propre, j'en ai fait un plugin jQuery :

jQuery.fn.extend({
	notification: function(params) {
		if(params==undefined) {var params={};}
		var msg = $(this).html();
		$(this).html('<div class="notification'+(params.css_class ? ' '+params.css_class : '')+'">'+(params.msg ? params.msg : (msg ? msg : 'Notification message in options : <code>{msg: \'Message\'}</code>') )+'</div>');
		$(this).hide('pulsate', {times: 1}, 1, function() {
			$(this).show('pulsate', {times: 3}, 1000, function() {
				var self = this;
				window.setTimeout(function () {
					$(self).hide('pulsate', {times:1}, 1000);
				}, 2000);
			});
		});
	}
});

Donc voilà comment il fonctionne :
code HTML :

<div id="super_notification"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#super_notification').notification({msg:'Salut'});
});
</script>

Le bloc div#super_notification servira ici de conteneur pour afficher le message Salut. Si msg n'est pas spécifié, c'est le contenu du bloc div#super_notification qui s'affichera en tant que notification. On peut aussi passer dans les options css_class qui pourra contenir une class CSS du message de notification. Ca permet la mise en forme. Personnellement je m'en suis servie pour gérer les erreurs (en rouge) des confirmations (en verte).

Un petit test en direct :