Detailed explanation of jQuery position() function and application of position function in jQuery_jquery

The

position() function is used to return the offset of the current matching element relative to its positioned ancestor element, that is, the coordinates relative to the positioned ancestor element. This function only works on visible elements.

The so-called "positioned element" means that the CSS position attribute value of the element is absolute, relative or fixed (as long as it is not the default static).

This function returns a coordinate object, which has a left attribute and a top attribute. Property values ​​are all numbers, and they are all in pixels (px).

The difference from offset() is that position() returns the coordinates relative to the positioned ancestor element, and offset() returns the coordinates relative to the current document. Additionally, the position() function cannot be used for setting operations. If all the ancestor elements of the current element are default positioned (static), then the offset position returned by this function is the same as the offset() function.

This function belongs to the jQuery object (instance).

Grammar

This function is new in jQuery 1.2.

jQueryObject.position( )

Return value

The return value of the position() function is of type Object, returning an offset coordinate object relative to the nearest "positioned" ancestor element. This object has left and top attributes.

If the current jQuery object matches multiple elements, when returning coordinates, the position() function only uses the first matching element. If there are no matching elements, undefined is returned.

The coordinate reference system in position() is based on the upper left corner of the positioned ancestor element as the origin (0,0), positive to the right and positive downward.

Examples & Instructions

Take the following HTML code as an example:

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

The following jQuery sample code is used to demonstrate the usage of position() function and offset() function:

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)

From the above jQuery operation results, we can see that position() does not obtain the offset position relative to its parent element. If all the ancestor elements of n2 are default positioned, the offset position returned by position() is consistent with the offset() function.

Next, we add relative positioning to n1 in the above HTML code:

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

Then, we re-execute the above jQuery code and you can see the following results:

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)

At this time, among the ancestor elements of n2, n1 is the nearest positioned ancestor element to n2 (here it is relative, the same is true for absolute and fixed), so position() returns the offset position of n2 relative to n1.

. Application of position function in jQuery (centering, off-screen processing, etc.)

jQuery provides a Position function, which can easily position Html elements. The simple usage method is as follows:

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

The above is a very common usage, register a click time, and then when a click event occurs, obtain the clicked element, and then display the dialog box to the interface using the position method.

The position function accepts an options object with many parameters

of: Indicates the object to be placed on, you can also pass the event object of click

my and at: These two are not easy to understand. In fact, they are the reference object and the referenced object. The my parameter indicates the position used for reference and at indicates the position of the reference target. The value range is any one or two of "left center right top bottom". For example: my:"top left",at:"left buttom", this configuration means that the upper left corner of the element to be set is placed in the lower left corner of the target element.

collision: Indicates how to handle collisions. The value range is: "flip fit none". Choose one of three. The official English description of flip is not very clear. The actual test effect is that if it exceeds the expected range (such as window), it will try to place the element in the opposite position of the target area. Fit is adaptation, which means that the element will be placed completely within the expected range without letting the element overflow. And none does not do any collision processing.

offset indicates how much distance to offset after aligning the elements with my, at, and of. For example, setting it to "100 100" means moving to the target position and then offset 100px downward and right

A common use is the position of the pop-up dialog box. In order to make the dialog box display at the position where the mouse clicks, you can pass the event object passed by click to the of parameter, and in order to ensure that the dialog box is within the scope of the window, you can use collision Set to fit. Finally, set the alignment parameters my and at according to actual needs, and use offset to fine-tune the offset. An example of setting the pop-up dialog box in the center of the window:

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

The above content is the detailed explanation of the jQuery position() function and the entire description of the application of the position function in jQuery that the editor has shared with you. I hope you like it.