JqueryUI - 位置

在本章中，我们将看到 jqueryUi 的实用方法之一，position()方法。position ()方法允许您相对于另一个元素或鼠标事件定位一个元素。

jQuery UI 从 jQuery 核心扩展了 .position() 方法，让您能够以自然地向其他人描述元素的方式描述如何定位元素。您不再处理数字和数学，而是处理有意义的单词（例如左和右）和关系。

句法

以下是position()方法的语法 -

.position( options )

其中options是 Object 类型，并提供指定如何定位包装集的元素的信息。下表列出了可以与此方法一起使用的不同选项-

先生。 选项和说明
1 我的

此选项指定包装元素（正在重新定位的元素）的位置，以与目标元素或位置对齐。默认情况下它的值为center。

选项-我的

此选项指定包装元素（正在重新定位的元素）的位置，以与目标元素或位置对齐。默认情况下它的值为center。

其中两个值用于指定位置：top、left、bottom、right 和 center，以空格字符分隔，其中第一个值是水平值，第二个值是垂直值。指定的单个值被视为水平还是垂直取决于您使用的值（例如，顶部被视为垂直，而右侧被视为水平）。

例子

top, or bottom right.
2 在

此选项的类型为字符串，指定目标元素的位置，重新定位的元素将与该目标元素对齐。采用与我的选项相同的值。默认情况下它的值为center。

选项 - 在

此选项的类型为字符串，指定目标元素的位置，重新定位的元素将与该目标元素对齐。采用与我的选项相同的值。默认情况下它的值为center。

例子

"right", or "left center"
3 的

这是 Selector 或 Element 或 jQuery 或 Event 类型。它标识要重新定位包装元素的目标元素，或包含用作目标位置的鼠标坐标的 Event 实例。默认情况下它的值为null。

选项 - of

This is of type Selector or Element or jQuery or Event. It identifies the target element against which the wrapped elements are to be re-positioned, or an Event instance containing mouse coordinates to use as the target location. By default its value is null.

Example

#top-menu
4 碰撞

该选项的类型为String，指定当定位元素在任意方向延伸超出窗口时要应用的规则。默认情况下它的值为Flip。

Option - collision

This option is of type String and specifies the rules to be applied when the positioned element extends beyond the window in any direction. By default its value is flip.

Accepts two (horizontal followed by vertical) of the following −

  • flip − Flips the element to the opposing side and runs collision detection again for fit. If neither side fits, center is used as a fallback.

  • fit − Keeps the element in the desired direction, but adjusts the position such that it will fit.

  • flipfit − First applies the flip logic, placing the element on whichever side allows more of the element to be visible. Then the fit logic is applied to ensure as much of the element is visible as possible.

  • none − Disables collision detection.

If a single value is specified, it applies to both directions.

Example

"flip", "fit", "fit flip", "fit none"
5 使用

该选项是一个替代改变元素位置的内部函数的函数。使用单个参数调用每个包装元素，该参数由对象哈希组成，其中left和top属性设置为计算的目标位置，元素设置为函数上下文。默认情况下它的值为null。

Option - using

This option is a function that replaces the internal function that changes the element position. Called for each wrapped element with a single argument that consists of an object hash with the left and top properties set to the computed target position, and the element set as the function context. By default its value is null.

Example

{horizontal: "center", vertical: "left", important: "horizontal" }
6 之内

此选项是一个选择器或元素或 jQuery 元素，允许您指定哪个元素用作碰撞检测的边界框。如果您需要将定位元素包含在页面的特定部分中，这会派上用场。默认情况下它的值为window。

Option - within

This option is a Selector or Element or jQuery element, and allows you to specify which element to use as the bounding box for collision detection. This can come in handy if you need to contain the positioned element within a specific section of your page. By default its value is window.

例子

下面的例子演示了位置方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI position method Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .positionDiv {
            position: absolute;
            width: 75px;
            height: 75px;
            background: #b9cd6d;
         }
         #targetElement {
            width: 300px;
            height: 500px;
            padding-top:50px;
         }
      </style>
      
      <script>
         $(function() {
            // Position the dialog offscreen to the left, but centered vertically
            $( "#position1" ).position({
               my: "center",
               at: "center",
               of: "#targetElement"
            });
            $( "#position2" ).position({
               my: "left top",
               at: "left top",
               of: "#targetElement"
            });
            $( "#position3" ).position({
               my: "right-10 top+10",
               at: "right top",
               of: "#targetElement"
            });
            $( document ).mousemove(function( event ) {
               $( "#position4" ).position({
                  my: "left+3 bottom-3",
                  of: event,
                  collision: "fit"
               });
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "targetElement">
         <div class = "positionDiv" id = "position1">Box 1</div>
         <div class = "positionDiv" id = "position2">Box 2</div>
         <div class = "positionDiv" id = "position3">Box 3</div>
         <div class = "positionDiv" id = "position4">Box 4</div>
      </div>
   </body>
</html>

让我们将上面的代码保存在 HTML 文件positionmethodexample.htm中，并在支持 javascript 的标准浏览器中打开它，您还必须看到以下输出。现在，您可以使用结果 -

在这个例子中我们看到 -

  • 框 1与div 元素的中心（水平和垂直）对齐。

  • 框 2与div 元素的左上角（水平和垂直）对齐。

  • 框 3显示在窗口的右上角，但保留一些填充以使消息更加突出。这是使用my或at的水平和垂直值完成的。

  • 对于框4，将值设置为事件对象。这是与指针关联的事件，并随鼠标事件一起移动。