Par défaut jquery ne permet pas de connaître la position d’un élément.
Ce qui est parfois gênant, lorsque, par exemple, on veut positionner un élément vis à vis d’un autre tel que des tooltips [1]
Utiliser les fonctions natives de javascript
En cherchant sur le net, nous trouvons assez rapidement ceci :
function findPos(obj) {
var curleft = obj.offsetLeft || 0;
var curtop = obj.offsetTop || 0;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
return {x:curleft,y:curtop};
}Comme vous pouvez le constater pas une once de jQuery, et pourtant ce code est issu d’un script [2] utilisant pleinement jQuery.
Si dans ce code on n’en trouve pas, c’est dû au fait que les méthodes offsetLeft, offsetTop, … sont des méthodes DOM propres à javascript. Ces méthodes ne sont pas accessibles directement par jQuery.
Etendre jQuery
Pour remédier à cela, il existe 2 fonction jQuery intéressantes :
-
$().get(val) -
jQuery.fn.extend()
get() retourne un tableau d’objets DOM associés à l’objet jquery spécifié. Ainsi les fonctions DOM seront utilisables.
extend() permet d’étendre jQuery pour offrir une nouvelle fonction aux différents objets jQuery.
Get
La fonction Get() retourne les éléments DOM à partir de jQuery. Par défaut Get() retourne un tableau des éléments DOM.
Ainsi $('body').get(); retourne un tableau d’une seule entrée.
Pour accéder à l’objet <body>, il faut donc faire $('body').get();
Extend()
La fonction extend()
En combinant le code précédent et ces 2 fonctions, nous obtenons :
jQuery.fn.extend({
findPos : function() {
obj = jQuery(this).get(0);
var curleft = obj.offsetLeft || 0;
var curtop = obj.offsetTop || 0;
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
return {x:curleft,y:curtop};
}
});Un exemple d’utilisation :
pos = $('body').findPos();
//retourne le coordonnées via
alert(pos.x);
//et
alert(pos.y);Remarques
Ce code ne retourne pas d’objet jQuery, il sera donc impossible de chaîner d’autres fonctions. La fonction ne fonctionne que pour un élément unique.
RSS 2.0
Plan du site
Espace privé