在本章中,我们将看到jqueryUi的一种实用方法,即 position()方法. position()方法允许您相对于另一个元素或鼠标事件定位元素.
jQuery UI从jQuery核心扩展.position()方法以某种方式让您描述您想要如何定位元素,就像您自然地将其描述给另一个人一样.你不是使用数字和数学,而是使用有意义的单词(例如左和右)和关系.
以下是 position()方法的语法 :
.position( options )
其中选项的类型为Object,并提供指定如何定位包装集的元素的信息.下表列出了可与此方法一起使用的不同选项 :
Sr.No. | 选项&描述 |
---|---|
1 | my 此选项指定要对齐的已包装元素(要重新定位的元素)的位置与目标元素或位置.默认情况下,其值为中心. 选项 - 我的 此选项指定包装元素(要重新定位的元素)与目标元素或位置对齐的位置.默认情况下,其值为 center . 其中两个值用于指定位置:顶部,左侧,底部,右侧和中心,以空格字符分隔,其中第一个值是水平值,第二个值是垂直.指定的单个值是否被视为水平或垂直取决于您使用的值(例如, top 被视为垂直,而右是水平的. 示例 top或right right. |
2 | at 此选项的类型为String,并指定目标元素的位置,以便与重新定位的元素对齐.采用与 my 选项相同的值.默认情况下,其值为中心. 选项 - 此选项的类型为String,并指定目标元素的位置,以便与重新定位的元素对齐.采用与 my 选项相同的值.默认情况下,其值为 center . 示例 "右",或"左中心" |
3 | of 这是Selector或Element类型或jQuery或Event类型.它标识要重新定位包装元素的目标元素,或包含用作目标位置的鼠标坐标的Event实例.默认情况下,其值为 null . 选项 - 这是Selector或Element类型或jQuery或Event类型.它标识要重新定位包装元素的目标元素,或包含用作目标位置的鼠标坐标的Event实例.默认情况下,其值为 null . 示例 #top-menu |
4 | collision 此选项的类型为String,并指定当定位元素在任何方向上超出窗口时要应用的规则.默认情况下,其值为翻转. 选项 - 碰撞 此选项的类型为String,并指定当定位元素在任何方向上超出窗口时要应用的规则.默认情况下,其值为翻转. 接受以下&减去两个(水平然后垂直);
如果指定了单个值,则它适用于两个方向. 示例 "flip","fit","fit flip","fit none " |
5 | using 此选项是替换更改元素位置的内部函数的函数.使用单个参数调用每个包装元素,该参数由对象哈希组成,其中 left 和 top 属性设置为计算目标位置,元素设置为函数上下文.默认情况下,其值为 null . 选项 - 使用 此选项是替换更改元素位置的内部函数的函数.使用单个参数调用每个包装元素,该参数由对象哈希组成,其中 left 和 top 属性设置为计算目标位置,元素设置为函数上下文.默认情况下,其值为 null . 示例 {水平:"中心",垂直:"左",重要:"水平"} |
6 | within 此选项是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 ,的值被设置为事件对象.这是与指针关联的事件,随鼠标事件一起移动.