créer des méthodes par Jquery

 

la création des méthodes sous Jquery

Apprendre par l'exemple est la meilleur façon d'assimiler les choses, pour ce, on va créer une nouvelle méthode qui permet de centrer l'objet (l'élément) sur lequel elle s'applique, on va l'appeler center() (d'ailleurs je me demande pourquoi une telle méthode n'existe pas en natif dans la bibliothèque jQuery!).

Avant de voir cette méthode, il faut savoir qu'il vaut mieux déclarer toutes nos nouvelles méthodes une fois le chargement du document terminé, on appelle pour cela la méthode ready() (natif dans jQuery) et on exécute une fonction anonyme function(){} comme ceci:

$(document).ready(function(){
// Ici se passe les choses...
})

Création de la méthode

 Maintenant, l'implémentation de la méthode center():

$(document).ready(function(){
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
this.css("display","block");
return this;
}
})

Comme vous pouvez le voir notre méthode center() a été greffée à jQuery.fn, il faut aussi savoir qu'on peut écrire l'objet jQuery sous la forme raccourcie $. Le this à l'interieur de la fonction anonyme qui sert à construire notre méthode pointe vers l'objet sur lequel cette méthode s'est appliquée. Comme vous le voyez on a utilisé des méthodes déjà disponibles dans jQuery à l'intérieur de cette fonction:

css() : ajoute une propriété css
height(), width(): renvoient respectivement la hauteur et la largeur de la fenêtre courante
scrollTop(), scrollLeft(): renvoient les positions verticale et horizontales de la barre de défilement

$(window) est ce qu'on appelle un sélecteur, ce sélecteur sélectionne l'objet fenêtre. Comme vous l'avez surement remarqué, la fonction renvoie l'objet lui-même qu'on lui a passé, c'est comme si elle dit "donnez moi l'objet et quand je fini avec je vous le rend", faire ce renvoi n'est pas obligatoire mais est très conseillé si on veut que notre "plugin" (notre nouvelle méthode) puisse s'intégrer de façon harmonieuse dans le reste de méthodes jQuery et les autres plugins, c'est ce qu'on appelle le chainage, cela permet d'écrire moins de code (c'est d'ailleurs la devise de jQuery: "write less do more"), pour comprendre la propriété de chainage voici un exemple concret:

$("div").hide().addClass("done").show();

L'objet c'est le sélectionneur $("div"), on lui applique la méthode hide() (cacher), après ça on lui ajoute une classe avec la méthode addClass() puis on le fait réapparaitre avec show().
Ce qui permet de faire tout ceci dans une même ligne est le fait que les méthodes hide(), addClass() et show() renvoient toutes l'objet qu'on leur a passé, à savoir $("div"), par exemple:

$("div").hide() renvoie this c'est à dire renvoie $("div") et on pourra alors lui appliquer addClass(), ainsi de suite. Si ce n'étais pas le cas, s'il n'y avait pas cette propriété de chainage dans jQuery, on aurait été obligé d'écrire:

$("div").hide();
$("div").addClass("done");
$("div").show();

Conclusion, pensez à toujours retourner l'objet this. 

Amélioration 

Tiens, on va profiter de cette propriété de chainage pour raccourcir encore plus la déclaration de notre méthode center():

$(document).ready(function(){
jQuery.fn.center = function () {
this.css("position","absolute").css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px").css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px").css("display","block");
return this;
}
})

Bon ok c'est pas trop joli quand même, sachez donc que c'est mieux d'écrire un script lisible:

$(document).ready(function(){
jQuery.fn.center = function () {
this.css("position","absolute")
.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px")
.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px")
.css("display","block");
return this;
}
})

C'est plus beau non :-). Mais tiens donc, toutes les méthodes css() renvoient l'objet this, donc à la fin on aura un objet this renvoyé, pourquoi ne pas faire ceci alors:

$(document).ready(function(){
jQuery.fn.center = function () {
return this.css("position","absolute")
.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px")
.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px")
.css("display","block");
}
})

Voila, maintenant vous pouvez tester cette méthode (n'oubliez pas d'inclure la librairie jQuery au début) sur une DIV colorée.

Teste:

 $('<div></div>').appendTo($('body')).html('<br><br><center>hello').css({"background":"blue","width":"100px","height":"100px"}).center();

Cette chaine créera une DIV, l'ajoutera à BODY, mettra dedansdonnera quelques propriétés CSS, et enfin la centrera au milieu de la fenêtre. du code HTML, lui