时间戳

首页 > 解决方案 > jQuery 位置 api 中的“使用”选项

jquery-ui - jQuery 位置 api 中的“使用”选项

问题描述

在 jQuery 文档中，它说反馈参数给出了水平、垂直和重要的，给你十二个潜在的方向，比如 {水平：“中心”，垂直：“左”，重要：“水平”}。

参考：https ://api.jqueryui.com/1.12/position/

什么是可能的 12 个方向？它们是如何到达 12 个方向的？什么是重要的？

根据 jQuery ui 代码，我只能看到这些值被设置。

水平 - 左、右、中心 垂直 - 上、下、中 重要 - 水平/垂直

没有为垂直设置值“左”。

标签： jquery-uipositionjquery-ui-tooltipjquery-widgets

解决方案

很确定他们的意思是：

Horizontal: "left", "center", "right"
Vertical:   "top", "middle", "bottom"
Important:  "horizontal", "vertical"

第二个提供关于两个元素的位置和尺寸的反馈，以及对它们的相对位置的计算。两者target和element具有以下属性：element, left, top, width, height. 此外，还有horizontal和vertical，important为您提供十二个潜在方向，例如{ horizontal: "center", vertical: "left", important: "horizontal" }。

我认为important是另外两个方向（共6个方向）中的哪一个具有优先权。6 x 2 = 12？我不确定他们的逻辑。它应该如何使用也不是很清楚。我创建了以下用于测试。

$(function() {
  function makeDiv(event) {
    var d = $("<div>", {
      id: "position" + ($("[id^='position']", event.target).length + 1),
      class: "positionDiv circle"
    }).appendTo($(event.target));
    d.position({
      my: "center",
      of: event,
      using: function(pos, props) {
        console.log(pos, props);
        var tg = props.target,
          el = props.element;
        $(this).css(pos);
        $(this).html("T: " + pos.top + "<br />L: " + pos.left + "<br />H: " + props.horizontal +"<br />V: " + props.vertical + "<br />I: " + props.important);
      }
    });
  }
  $("#position1").position({
    my: "center",
    at: "center",
    of: "#targetElement"
  });
  $("#targetElement").click(makeDiv);
});
#targetElement {
  height: 200px;
  margin: 10px;
  background: #9cf;
}

.positionDiv {
  position: absolute;
  width: 75px;
  height: 75px;
  background: #080;
}

.positionDiv.circle {
  border-radius: 50%;
  text-align: center;
  font-family: 'Arial', sans-serif;
  font-size: 12px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="targetElement">
  <div class="positionDiv" id="position1"></div>
</div>

不完全是您正在寻找的答案。我希望它有点帮助。

推荐阅读