Explication détaillée de la fonction jQuery position() et application de la fonction position dans jQuery_jquery

La fonction

position() est utilisée pour renvoyer le décalage de l'élément correspondant actuel par rapport à son élément ancêtre positionné, c'est-à-dire les coordonnées relatives à l'élément ancêtre positionné. Cette fonction ne fonctionne que sur les éléments visibles.

Le soi-disant "élément positionné" signifie que la valeur de l'attribut de position CSS de l'élément est absolue, relative ou fixe (tant qu'il ne s'agit pas de la valeur statique par défaut).

Cette fonction renvoie un objet de coordonnées, qui a un attribut left et un attribut top. Les valeurs des propriétés sont toutes des nombres et elles sont toutes en pixels (px).

La différence avec offset() est que position() renvoie les coordonnées relatives à l'élément ancêtre positionné et offset() renvoie les coordonnées relatives au document actuel. De plus, la fonction position() ne peut pas être utilisée pour les opérations de définition. Si tous les éléments ancêtres de l'élément actuel sont positionnés par défaut (statiques), alors la position de décalage renvoyée par cette fonction est la même que la fonction offset().

Cette fonction appartient à l'objet (instance) jQuery.

Grammaire

Cette fonction est nouvelle dans jQuery 1.2.

jQueryObject.position( )

Valeur de retour

La valeur de retour de la fonction position() est de type Object, renvoyant un objet de coordonnées décalées par rapport à l'élément ancêtre "positionné" le plus proche. Cet objet a les attributs left et top.

Si l'objet jQuery actuel correspond à plusieurs éléments, lors du renvoi des coordonnées, la fonction position() utilise uniquement le premier élément correspondant. S'il n'y a aucun élément correspondant, undefined est renvoyé.

Le système de référence de coordonnées dans position() est basé sur le coin supérieur gauche de l'élément ancêtre positionné comme origine (0,0), positif vers la droite et positif vers le bas.

Exemples et instructions

Prenons le code HTML suivant comme exemple :

<br>
<br>
<p id="n1"><span id="n2">专注于编程开发技术分享</span></p>

L'exemple de code jQuery suivant est utilisé pour démontrer l'utilisation de la fonction position() et de la fonction offset() :

var $n2 = $("#n2");
// 输出n2的偏移坐标
var pos = $n2.position();
document.writeln( "n2的position()偏移坐标：(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐标：(8, 60)
var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐标：(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐标：(8, 60)

D'après les résultats de l'opération jQuery ci-dessus, nous pouvons voir que position() n'obtient pas la position de décalage par rapport à son élément parent. Si tous les éléments ancêtres de n2 sont positionnés par défaut, la position de décalage renvoyée par position() est cohérente avec la fonction offset().

Ensuite, nous ajoutons le positionnement relatif à n1 dans le code HTML ci-dessus :

<br>
<br>
<p id="n1" style="position: relative;" ><span id="n2">专注于编程开发技术分享</span></p>

Ensuite, nous réexécutons le code jQuery ci-dessus et vous pouvez voir les résultats suivants :

var $n2 = $("#n2");
// 输出n2的偏移坐标
var pos = $n2.position();
document.writeln( "n2的position()偏移坐标：(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐标：(0, 0)
var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐标：(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐标：(8, 60)

À ce stade, parmi les éléments ancêtres de n2, n1 est l'élément ancêtre positionné le plus proche de n2 (ici il est relatif, il en va de même pour l'absolu et le fixe), donc position() renvoie la position décalée de n2 relatif au n1.

. Application de la fonction de position dans jQuery (centrage, traitement hors écran, etc.)

jQuery fournit une fonction Position, qui peut facilement positionner des éléments HTML. La méthode d'utilisation simple est la suivante :

$(".daygrid").click(function(event){
  clickedGrid = $(this);
  $(".modal").modal("show");
  $(".modal").position({
    of:clickedGrid,
    offset:" ",
    collision:"fit"
  });
});

Ce qui précède est une utilisation très courante, enregistrez une heure de clic, puis lorsqu'un événement de clic se produit, obtenez l'élément cliqué, puis affichez la boîte de dialogue sur l'interface en utilisant la méthode de position.

La fonction position accepte un objet options avec de nombreux paramètres

de : Indique l'objet sur lequel être placé, vous pouvez également passer l'objet événementiel du clic

My et at : Ces deux-là ne sont pas faciles à comprendre. En fait, ce sont l'objet de référence et l'objet de référence. Le paramètre my indique la position utilisée pour la référence et at indique la position de la cible de référence. La plage de valeurs est l'une ou deux des valeurs suivantes : "gauche centre droit haut bas". Par exemple : my:"top left",at:"left buttom", cette configuration signifie que le coin supérieur gauche de l'élément à définir est placé dans le coin inférieur gauche de l'élément cible.

collision : indique comment gérer les collisions. La plage de valeurs est : "flip fit none". Choisissez l'une des trois. La description officielle en anglais du flip n'est pas très claire. L'effet réel du test est que s'il dépasse la plage attendue (comme la fenêtre), il tentera de placer l'élément dans la position opposée de la zone cible. L'ajustement est une adaptation, ce qui signifie que l'élément sera placé complètement dans la plage attendue sans laisser l'élément déborder. Et aucun ne traite les collisions.

le décalage indique la distance à décaler après avoir aligné les éléments avec my, at et of. Par exemple, le définir sur "100 100" signifie se déplacer vers la position cible, puis décaler de 100 pixels vers le bas et vers la droite

.

Une utilisation courante est la position de la boîte de dialogue pop-up. Afin de faire afficher la boîte de dialogue à la position où la souris clique, vous pouvez passer l'objet événement passé par clic au paramètre of, et dans l'ordre. pour vous assurer que la boîte de dialogue se trouve dans la portée de la fenêtre, vous pouvez utiliser Collision Set to fit. Enfin, définissez les paramètres d'alignement my et at en fonction des besoins réels et utilisez offset pour affiner le décalage. Un exemple de paramétrage de la boîte de dialogue pop-up au centre de la fenêtre :

$("#myDialog").position({
  my: "center",
  at: "center",
  of: window,
  collision:"fit"
});

Le contenu ci-dessus est l'explication détaillée de la fonction jQuery position() et la description complète de l'application de la fonction position dans jQuery que l'éditeur a partagée avec vous.