JqueryUI - position() 定位方法

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

jQuery UI 扩展了 jQuery 核心的 .position() 方法,使您可以像自然地向其他人描述元素一样描述您希望如何定位元素。 您不是在处理数字和数学,而是在处理有意义的单词(例如左和右)和关系。

语法

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

.position( options )

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

序号 选项 & 说明
1 my

此选项指定包装元素(被重新定位的元素)的位置以与目标元素或位置对齐。 默认情况下,它的值为 center

Option - my

此选项指定包装元素(被重新定位的元素)的位置以与目标元素或位置对齐。 默认情况下,它的值为 center

其中两个值用于指定位置:top、left、bottom、right 和 center,由空格字符分隔,其中第一个值是水平值,第二个是垂直值。指定的单个值被视为水平还是垂直取决于您使用的值(例如,top被视为垂直,而right 是水平)。

示例

top, or bottom right.
2 at

此选项是 String 类型,指定要对齐重新定位的元素的目标元素的位置。 采用与 my 选项相同的值。 默认情况下,它的值为 center

Option - at

此选项是 String 类型,指定要对齐重新定位的元素的目标元素的位置。 采用与 my 选项相同的值。 默认情况下,它的值为 center

示例

"right", or "left center"
3 of

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

Option - of

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

示例

#top-menu
4 collision

此选项是 String 类型,指定定位元素在任何方向超出窗口时应用的规则。 默认情况下,它的值为 flip

Option - collision

此选项是 String 类型,指定定位元素在任何方向超出窗口时应用的规则。 默认情况下,它的值为 flip

接受以下两个(水平后垂直) −

  • flip − 将元素翻转到另一侧并再次运行碰撞检测以适合。 如果两边都不适合,则使用中心作为后备。

  • fit − 将元素保持在所需的方向,但调整位置以使其适合。

  • flipfit − 首先应用翻转逻辑,将元素放在允许更多元素可见的一侧。 然后应用适合逻辑以确保尽可能多的元素可见。

  • none − 关闭碰撞检测

如果指定单个值,则它适用于两个方向。

示例

"flip", "fit", "fit flip", "fit none"
5 using

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

Option - using

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

示例

{horizontal: "center", vertical: "left", important: "horizontal" }
6 within

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

Option - within

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


示例

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

<!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 的标准浏览器中打开它,您应该会看到以下输出。 现在,您可以查看结果 −

In this example we see that −

  • Box 1 与 div 元素的 中心对齐(水平和垂直)。

  • Box 2 与 div 元素 的左上角(水平和垂直)对齐。

  • Box 3显示在窗口的右上角,但要留一些填充以使消息更加突出。 这是使用 myat 的水平和垂直值完成的。

  • 对于Box 4of 值被设置为一个事件对象。 这是一个与指针相关联的事件,并随鼠标事件移动。