Detaillierte Erläuterung der jQuery-Funktion position() und Anwendung der Positionsfunktion in jQuery_jquery

Die Funktion

position() wird verwendet, um den Versatz des aktuell passenden Elements relativ zu seinem positionierten Vorgängerelement zurückzugeben, d. h. die Koordinaten relativ zum positionierten Vorgängerelement. Diese Funktion funktioniert nur bei sichtbaren Elementen.

Das sogenannte „positionierte Element“ bedeutet, dass der CSS-Positionsattributwert des Elements absolut, relativ oder fest ist (solange es sich nicht um den statischen Standardwert handelt).

Diese Funktion gibt ein Koordinatenobjekt zurück, das ein linkes Attribut und ein oberes Attribut hat. Eigenschaftswerte sind alle Zahlen und werden alle in Pixel (px) angegeben.

Der Unterschied zu offset() besteht darin, dass position() die Koordinaten relativ zum positionierten Vorgängerelement zurückgibt und offset() die Koordinaten relativ zum aktuellen Dokument zurückgibt. Darüber hinaus kann die Funktion position() nicht für Einstellungsvorgänge verwendet werden. Wenn alle Vorgängerelemente des aktuellen Elements standardmäßig (statisch) positioniert sind, ist die von dieser Funktion zurückgegebene Offset-Position dieselbe wie die der Funktion offset().

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Grammatik

Diese Funktion ist neu in jQuery 1.2.

jQueryObject.position( )

Rückgabewert

Der Rückgabewert der Funktion position() ist vom Typ Objekt und gibt ein Offset-Koordinatenobjekt relativ zum nächstgelegenen „positionierten“ Vorgängerelement zurück. Dieses Objekt verfügt über die Attribute „links“ und „oben“.

Wenn das aktuelle jQuery-Objekt mit mehreren Elementen übereinstimmt, verwendet die Funktion position() bei der Rückgabe von Koordinaten nur das erste übereinstimmende Element. Wenn keine passenden Elemente vorhanden sind, wird undefiniert zurückgegeben.

Das Koordinatenreferenzsystem in position() basiert auf der oberen linken Ecke des positionierten Vorgängerelements als Ursprung (0,0), positiv nach rechts und positiv nach unten.

Beispiele & Anleitungen

Nehmen Sie den folgenden HTML-Code als Beispiel:

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

Der folgende jQuery-Beispielcode wird verwendet, um die Verwendung der Funktionen position() und offset() zu demonstrieren:

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)

Aus den obigen jQuery-Operationsergebnissen können wir ersehen, dass position() die Offset-Position relativ zu seinem übergeordneten Element nicht erhält. Wenn alle Vorgängerelemente von n2 standardmäßig positioniert sind, stimmt die von position() zurückgegebene Offset-Position mit der Funktion offset() überein.

Als nächstes fügen wir die relative Positionierung zu n1 im obigen HTML-Code hinzu:

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

Dann führen wir den obigen jQuery-Code erneut aus und Sie können die folgenden Ergebnisse sehen:

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)

Zu diesem Zeitpunkt ist n1 unter den Vorfahrenelementen von n2 das am nächsten zu n2 positionierte Vorfahrenelement (hier ist es relativ, das Gleiche gilt für absolut und fest), sodass position() die Versatzposition von n2 relativ zurückgibt zu n1.

. Anwendung der Positionsfunktion in jQuery (Zentrierung, Off-Screen-Verarbeitung usw.)

jQuery bietet eine Positionsfunktion, mit der HTML-Elemente einfach positioniert werden können. Die einfache Verwendungsmethode ist wie folgt:

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

Das Obige ist eine sehr häufige Verwendung: Registrieren Sie eine Klickzeit und rufen Sie dann, wenn ein Klickereignis auftritt, das angeklickte Element ab und zeigen Sie dann das Dialogfeld mithilfe der Positionsmethode an der Schnittstelle an.

Die Positionsfunktion akzeptiert ein Optionsobjekt mit vielen Parametern

von: Gibt das Objekt an, auf dem platziert werden soll. Sie können auch das Ereignisobjekt des Klicks

übergeben

My und at: Diese beiden sind nicht leicht zu verstehen. Tatsächlich handelt es sich um das Referenzobjekt und das Referenzobjekt. Der my-Parameter gibt die Position an, die als Referenz verwendet wird, und at gibt die Position des Referenzziels an. Der Wertebereich ist ein oder zwei Werte von „links Mitte rechts oben unten“. Zum Beispiel: my:"top left",at:"left buttom", diese Konfiguration bedeutet, dass die obere linke Ecke des festzulegenden Elements in der unteren linken Ecke des Zielelements platziert wird.

Kollision: Gibt an, wie mit Kollisionen umgegangen wird. Der Wertebereich ist: „Flip Fit None“. Die offizielle englische Beschreibung von Flip ist nicht sehr klar. Der tatsächliche Testeffekt besteht darin, dass versucht wird, das Element an der gegenüberliegenden Position des Zielbereichs zu platzieren, wenn es den erwarteten Bereich überschreitet (z. B. Fenster). Bei der Anpassung handelt es sich um eine Anpassung, was bedeutet, dass das Element vollständig innerhalb des erwarteten Bereichs platziert wird, ohne dass das Element überläuft. Und none führt keine Kollisionsverarbeitung durch.

Offset gibt an, wie viel Abstand nach dem Ausrichten der Elemente mit „my“, „at“ und „of“ verschoben werden soll. Wenn Sie ihn beispielsweise auf „100 100“ einstellen, bedeutet dies, dass Sie sich zur Zielposition bewegen und dann 100 Pixel nach unten und rechts verschieben.

Eine häufige Verwendung ist die Position des Popup-Dialogfelds. Damit das Dialogfeld an der Position angezeigt wird, an der die Maus klickt, können Sie das per Klick übergebene Ereignisobjekt an den Parameter „of“ übergeben Um sicherzustellen, dass sich das Dialogfeld innerhalb des Fensterbereichs befindet, können Sie Kollisionsanpassung verwenden. Stellen Sie abschließend die Ausrichtungsparameter my und at entsprechend den tatsächlichen Anforderungen ein und verwenden Sie offset, um den Offset fein abzustimmen. Ein Beispiel für die Einstellung des Popup-Dialogfelds in der Mitte des Fensters:

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

Der obige Inhalt ist die detaillierte Erklärung der jQuery-Funktion position() und die gesamte Beschreibung der Anwendung der Positionsfunktion in jQuery, die der Herausgeber mit Ihnen geteilt hat. Ich hoffe, er gefällt Ihnen.