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" );