JqueryUI - 位置

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

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

语法

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

.position( options )

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

Sr.No.选项&描述
1my

此选项指定要对齐的已包装元素(要重新定位的元素)的位置与目标元素或位置.默认情况下,其值为中心.

选项 - 我的

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

其中两个值用于指定位置:顶部,左侧,底部,右侧和中心,以空格字符分隔,其中第一个值是水平值,第二个值是垂直.指定的单个值是否被视为水平垂直取决于您使用的值(例如, top 被视为垂直,而是水平的.

示例

 
 top或right right.
2at

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

选项 -  

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

示例

 
"右",或"左中心"
3of

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

选项 -  

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

示例

 
 #top-menu
4collision

此选项的类型为String,并指定当定位元素在任何方向上超出窗口时要应用的规则.默认情况下,其值为翻转.

选项 - 碰撞

此选项的类型为String,并指定当定位元素在任何方向上超出窗口时要应用的规则.默认情况下,其值为翻转.

接受以下&减去两个(水平然后垂直);

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

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

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

  • none : 禁用碰撞检测.

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

示例

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

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

选项 - 使用

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

示例

 
 {水平:"中心",垂直:"左",重要:"水平"}
6within

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

选项 -  

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

示例

以下示例演示了 position 方法的使用.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI position method Example</title>
      <link href = "https://img01.yuandaxia.cn/Content/img/tutorials/jqueryui/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元素的左上角(水平和垂直)对齐.

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

  • 对于方框4 ,的值被设置为事件对象.这是与指针关联的事件,随鼠标事件一起移动.