JqueryUI - 位置

JqueryUI职位 - 从基本到高级概念的简单简单步骤学习JqueryUI，其中包括概述，环境设置，交互，可拖动，可放置，可调整大小，可选，可排序，小部件，手风琴，自动完成，按钮，Datepicker，对话框，菜单， Progressbar，Slider，Spinner，Tabs，Tooltip，Effects，Add Class，Color Animation，Effect，Hide，Remove Class，Show，Switch Class，Toggle，Toggle Class，Utilities，Position，Widget Factory

在本章中，我们将看到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 : 将元素保持在所需的方向，但调整位置以使其适合. flipfit : 首先应用翻转逻辑，将元素放在任何一侧允许更多元素可见.然后应用拟合逻辑以确保尽可能多的元素可见. none : 禁用碰撞检测. 如果指定了单个值，则它适用于两个方向. 示例 "flip"，"fit"，"fit flip"，"fit none "
5	using 此选项是替换更改元素位置的内部函数的函数.使用单个参数调用每个包装元素，该参数由对象哈希组成，其中 left 和 top 属性设置为计算目标位置，元素设置为函数上下文.默认情况下，其值为 null . 选项 - 使用此选项是替换更改元素位置的内部函数的函数.使用单个参数调用每个包装元素，该参数由对象哈希组成，其中 left 和 top 属性设置为计算目标位置，元素设置为函数上下文.默认情况下，其值为 null . 示例 {水平:"中心"，垂直:"左"，重要:"水平"}
6	within 此选项是Selector或Element或jQuery元素，允许您指定要用作边界框的元素用于碰撞检测.如果您需要在页面的特定部分中包含定位元素，这可以派上用场.默认情况下，其值为窗口. 选项 - 此选项是Selector或Element或jQuery元素，允许您指定将哪个元素用作碰撞检测的边界框.如果您需要在页面的特定部分中包含定位元素，这可以派上用场.默认情况下，其值为窗口.

示例

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

               jQuery UI position method Example                                                                        Box 1

Box 2

Box 3 Box 4

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

在这个例子中我们看到 :

Box 1 与div元素的中心(水平和垂直)对齐.
Box 2 与div元素的左上角(水平和垂直)对齐.
框3 显示在窗口的右上角，但留下一些填充，以便消息更突出.这是使用 my 或的水平和垂直值完成的.
对于方框4 ，的值被设置为事件对象.这是与指针关联的事件，随鼠标事件一起移动.