Définit un champ générateur de paire de clés (pour les formulaires)
La méthode .offset() permet de récupérer la position actuelle d'un élément par rapport au document
La méthode .offset() permet de récupérer la position actuelle d'un élément par rapport au document. Ce qui fait la différence avec la méthode .position(), qui récupère l'actuelle position par rapport au parent.
Lors du positionnement d'un nouvel élément dans une manipulation (en particulier pour la mise en œuvre de glisser-déplacer), la méthode .offset() est le plus utile.
La méthode .offset() retourne un objet contenant les propriétés top et left.
Syntaxe:
$(sélecteurr).offset()
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x=$("p").offset();
alert("Left offset est: " +
x.left + " Top offset est: " + x.top);
});
});
</script>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<button>Trouver les coordonnés de
p</button>
</body>
</html>
La méthode .offset() sert aussi pour définir les coordonnées d'un élément. Syntaxe
$(séleceuor).offset(valeur)
|
Paramètre |
Description |
|---|---|
|
valeur |
Obligatoire. Un objet contenant les propriétés top et left, qui sont des entiers en pixel indiquant les nouvelles coordonnées de haut et gauche des éléments. Valeurs possibles :
|
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<scriptgt;
$(document).ready(function(){
$("button").click(function(){
$("p").offset({top:100,left:0});
});
});
</script>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<button>Définir les
coordonnés</button>
</body>
</html>
La méthode offset peut aussi définir les coordonnés d(un élément l'aide d'une fonction. Syntaxe
$(sélecteur).offset(fonction(index,oldoffset))
|
Paramètre |
Description |
|---|---|
|
fonction(index,oldoffset) |
Spécifie une fonction qui retourne un objet contenant les coordonnées haut et gauche.
|
Exemple :
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<scriptgt;
$(document).ready(function(){
$("button").click(function(){
$("p").offset(function(n,coord){
newPosition=new Object();
newPosition.left=coord.left+100;
newPosition.top=coord.top+100;
return newPosition;
});
});
});
</script>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<button>Définir les
coordonnés</button>
</body>
</html>