当前位置: 首页 > 文档资料 > jQueryUI 入门教程 >

位置(Position)

优质
小牛编辑
130浏览
2023-12-01

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

jQuery UI以一种方式从jQuery核心扩展.position()方法,这种方式可以让你描述你想要如何定位元素,就像你自然地将它描述给另一个人一样。 您可以使用有意义的单词(例如左右)和关系,而不是使用数字和数学。

语法 (Syntax)

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

.position( options )

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

Sr.No.选项和说明
1my

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

Option - my

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

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

Example

top, or bottom right.
2at

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

Option - at

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

Example

"right", or "left center"
3of

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

Option - of

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

Example

#top-menu
4collision

此选项的类型为String,并指定当定位元素在任何方向上延伸到窗口之外时要应用的规则。 默认情况下,其值为flip

Option - collision

此选项的类型为String,并指定当定位元素在任何方向上延伸到窗口之外时要应用的规则。 默认情况下,其值为flip

接受以下两个(水平跟随垂直) -

  • flip - 将元素翻转到相对侧并再次进行碰撞检测以确保合适。 如果两侧都不适合,则使用中心作为后备。

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

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

  • none - 禁用冲突检测。

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

Example

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

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

Option - using

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

Example

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

此选项是Selector或Element或jQuery元素,允许您指定要用作碰撞检测边界框的元素。 如果您需要在页面的特定部分中包含定位元素,这可以派上用场。 默认情况下,其值为window

Option - within

此选项是Selector或Element或jQuery元素,允许您指定要用作碰撞检测边界框的元素。 如果您需要在页面的特定部分中包含定位元素,这可以派上用场。 默认情况下,其值为window

例子 (Example)

以下示例演示了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的标准浏览器中打开它,您还必须看到以下输出。

在这个例子中我们看到 -

  • Box 1对准div元件的中心(水平和垂直)。

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

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

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