Comment puis-je écrire un plugin ?

Index

Le plugin construit un fragment du DOM, une division avec un message de bienvenue. Cinq secondes après l'exécution du plugin, l'animation d'effacement du message est activée, à la fin de cette animation la division contenant le message est supprimée et la fonction de rappel est exécutée.

Code JS : 

( function( $, W ){
		
		$.fn.monPlugin = function( options ){
			
			var opts = $.extend( true, {}, $.fn.monPlugin.defaults, options );
	
			return this.each( function( i, item ){
				
				$( "<div/>", {
					"class" : "monPlugin",
					"html" : '<p>' + opts[ "text" ] + '</p>',
					"css" : {
						"margin" : opts[ "margin" ],
						"padding" : opts[ "padding" ],
						"border" : opts[ "border" ],
						"background-color" : opts[ "background-color" ],
						"color" : opts[ "color" ],
						"font-size" : opts[ "font-size" ],
						"font-family" : opts[ "font-family" ],
						"text-align" : opts[ "text-align" ]
					}
				}).prependTo( item );
			
				W.setTimeout( function(){
					$( ".monPlugin" ).fadeOut( 3000, function(){
						$( this ).remove();
						opts[ "callback" ]();
					});
					
				}, 5000 );
			});
		};
		
		$.fn.monPlugin.defaults = {
			"margin" : "12px",
			"padding" : "6px",
			"border" : "1px dotted blue",
			"background-color" : "lightgreen",
			"color" :"blue",
			"font-size" : "24px",
			"font-family" : "Sofia, cursive",
			"text" : "Bonjour à toutes et à tous !",
			"text-align" : "center",
			"callback" : function(){}
		};
		
	})( jQuery, window );
	
	$( ".conteneur" ).monPlugin({
		"font-size" : "36px",
		"callback" : function(){
			$( ".conteneur" ).css( "background-color", "white" );
		}
	}).css( "background-color", "lightgrey" );

Tests unitaires avec QUnit.