jQuery UI 位置()

Question

我不知道如何使用 jQuery ui position()

定位元素

例如：

  $("#element").position({
        my: 'center top',
        at: 'center top',
        of: '.content' 
    });

这有效，元素位于父元素的顶部中心，但是这个

  $("#element").position({
        my: 'center bottom',
        at: 'center bottom',
        of: '.content' 
    });

不起作用。左下角和右下角也是如此。

我创建了jsbin https://jsbin.com/kuzaketaqi/edit?html,js,output

$("#buttons").on('click', 'button', function() {
  var position = $(this).attr('data-position');

  $("#el").position({
    my: position,
    at: position,
    of: '#parent'
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="buttons">
  <button data-position="center center">C/C</button>
  <button data-position="center top">C/T</button>
  <button data-position="center bottom">C/B</button>
  <button data-position="left center">L/C</button>
  <button data-position="right center">R/C</button>
  <button data-position="left top">L/T</button>
  <button data-position="right top">R/T</button>
  <button data-position="left bottom">L/B</button>
  <button data-position="right bottom">R/B</button>
</div>

<div id="parent" style="height:300px; border:1px solid #000;position:relative">
  <button id="el" style="background:#fccccc;width:60px;height:30px;border:0;position:absolute;top:10px;left:10px"></button>
</div>

Answer 1

当 #parent 的全高在浏览器视口中不可见时，底部位置可能不起作用 - 给 within: '#parent' 参数（默认是 window 并且定位将被限制在视口内！）

参见下面的演示：

$("#buttons").on('click', 'button', function() {
  var position = $(this).attr('data-position');

  $("#el").position({
    my: position,
    at: position,
    of: '#parent',
    within: '#parent'
  });
});

<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="buttons">
  <button data-position="center center">C/C</button>
  <button data-position="center top">C/T</button>
  <button data-position="center bottom">C/B</button>
  <button data-position="left center">L/C</button>
  <button data-position="right center">R/C</button>
  <button data-position="left top">L/T</button>
  <button data-position="right top">R/T</button>
  <button data-position="left bottom">L/B</button>
  <button data-position="right bottom">R/B</button>
</div>

<div id="parent" style="height:300px; border:1px solid #000">
  <button id="el" style="background:#fccccc;width:60px;height:30px;border:0"></button>
</div>

jQuery UI 位置()

jQuery UI position()

html

javascript

jquery

position

jquery-ui