Опция «Использование» в jQuery позиции - PullRequest
Новая
       41

Опция «Использование» в jQuery позиции

0 голосов
/ 01 июля 2019

В документации jQuery говорится, что аргумент обратной связи дает горизонтальное, вертикальное и важное значение, давая вам двенадцать потенциальных направлений, таких как {горизонтальный: «центр», вертикальный: «левый», важный: «горизонтальный»}.

Ref: https://api.jqueryui.com/1.12/position/

Каковы возможные 12 направлений? Как они достигают 12 направлений? Что важно?

Согласно коду пользовательского интерфейса jQuery, я вижу, как устанавливаются только эти значения.

Горизонтально - слева, справа, в центре Вертикальный - верх, низ, середина Важно - горизонтальный / вертикальный

Нет значения 'left', установленного для вертикали.

1 Ответ

0 голосов
/ 02 июля 2019

Уверен, они значат: 

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 х 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>

Не совсем тот ответ, который вы искали. Надеюсь, это немного поможет.

...