Vincent Composieux – Développeur web Symfony / Zend

En ce Dimanche matin, j’avais besoin de faire quelquechose pour avoir des notifications / alertes sur un projet web dont je vous reparlerais très prochainement.

Je n’avais jamais créé de plug-in jQuery, c’est maintenant chose faite, même s’il n’est vraiment pas extraordinaire, il vous permettra de créer des petites notifications sympas en haut de votre site web ! Biensûr, il reste personnalisé pour mon projet mais est très facilement adaptable à votre sauce.

Commençons par le code JavaScript (après avoir inclus la librairie jQuery) :

(function($) {
	$.notice = {
		show: function(message) {
			/** Configuration */
			var top = 5;
			var left = 15;
			var fadeoutDuration = 1000;

			/** Launch the notification */
			$('html, body').animate({scrollTop:0});
			$('

').attr('id', 'notice').css('left', (50-left)+'%').css('top', (0+top)+'px').appendTo('body').text(message);

			/** Switch off the notification */
			setTimeout(function() {$('#notice').animate({ opacity: 0, top: '-20px' }, fadeoutDuration);}, 2000);
			setTimeout(function() {$('#notice').remove();}, 3000);
		}
	}

	jQnotice = function(message) { $.notice.show(message); };
})(jQuery);

Ajoutez à celà un petit bloc de CSS :

#notice {
	position:absolute;
	background-image:url('/images/notice.png');
	width:250px;
	height:35px;
	text-align:center;
	padding:15px 0 0 0;
	font-size:11px;
	color:#467618;
}

Vous aurez également besoin de cette image :

Enfin, terminons par l’appel de la méthode pour lancer une notification :

jQnotice('Votre message de notification');

- Adresse du plug-in : http://plugins.jquery.com/project/jQnotice
- Adresse de démonstration : http://composieux.fr/jqnotice