jQuery UI 实例 - 定位（Position）

概述

jQuery UI 提供的 Position 用于组件定位，帮助开发者解决元素定位问题，同时支持自定义定位算法。Position 支持多种设置选项，如自动调整位置、碰撞检测等。本文将对定位（Position）进行详细的介绍和实例演示。

基本语法

$(selector).position({
  my: "center",
  at: "center",
  of: window
});

• my：定位元素的位置锚点，默认值为 “center”，同时支持纵向和横向分开设置，如 “top center”、“left center” 等；
• at：参照元素的位置锚点，默认值为 “center”，同时支持与 my 锚点不同的设置，如 “bottom right”、“center left” 等；
• of：参照元素，默认为浏览器窗口，可以是选择器、jQuery 对象、DOM 对象或事件对象。

选项参数

Position 还支持多种选项参数，方便进行更加精细化的定位：

• collision：碰撞检测函数，即元素定位时进行碰撞检测，是否需要进行位置调整。如需要就设置为 “fit”，否则为 “flip” 或 false；
• using：自定义位置调整函数，可以自行定义一个函数实现定位位置的调整。

实例演示

接下来，我们以 Position 实现气泡组件浮现的示例进行演示。具体实现代码如下：

<div class="bubble"></div>
<button id="btn">click me!</button>

.bubble {
    position: absolute;
    background-color: #78B9D0;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 3px 3px 8px #999;
    display: none;
}

$(document).ready(function() {
  $("#btn").click(function() {
    $(".bubble").position({
      my: "left top",
      at: "right top",
      of: $(this),
      collision: "flip",
      using: function(pos, info) {
        $(this).css({
          "left": pos.left+10+"px",
          "top": pos.top+10+"px",
          "display": "block"
        });
      }
    });
  });
});

• my：定位元素的左上角顶点与参照元素的左上角顶点对齐，方便进行气泡组件浮现；
• at：定位元素的左上角顶点与参照元素的右上角顶点对齐；
• of：参照元素为按钮组件；
• collision：碰撞检测函数为“翻转”，即碰到浏览器窗口边缘时自动翻转；
• using：使用自定义函数调整气泡组件的位置，向右下移动 10 像素。

结论

通过本文的介绍和实例演示，相信大家已经对 Position 定位有了更深刻的了解。在实际开发中，Position 不仅仅能够帮助我们解决定位问题，同时也能够提高我们开发效率，减少我们的工作量。