jQuery UI 实例 – 定位（Position）

相对窗口、文档、锚、光标/鼠标等元素定位一个元素。

如需了解更多有关 .position() 方法的细节，请查看 API 文档 .position()。

默认功能

使用表单控件配置位置，或者拖拽被定位的元素来修改它的偏移量。向四周拖拽父元素来查看碰撞检测。

<!doctype html>
<html lang=\"en\">
<head>
  <meta charset=\"utf-8\">
  <title>jQuery UI 定位（Position） - 默认功能</title>
  <link rel=\"stylesheet\" href=\"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css\">
  <script src=\"//code.jquery.com/jquery-1.9.1.js\"></script>
  <script src=\"//code.jquery.com/ui/1.10.4/jquery-ui.js\"></script>
  <link rel=\"stylesheet\" href=\"http://jqueryui.com/resources/demos/style.css\">
  <style>
  #parent {
    width: 60%;
    height: 40px;
    margin: 10px auto;
    padding: 5px;
    border: 1px solid #777;
    background-color: #fbca93;
    text-align: center;
  }
  .positionable {
    position: absolute;
    display: block;
    right: 0;
    bottom: 0;
    background-color: #bcd5e6;
    text-align: center;
  }
  #positionable1 {
    width: 75px;
    height: 75px;
  }
  #positionable2 {
    width: 120px;
    height: 40px;
  }
  select, input {
    margin-left: 15px;
  }
  </style>
  <script>
  $(function() {
    function position() {
      $( \".positionable\" ).position({
        of: $( \"#parent\" ),
        my: $( \"#my_horizontal\" ).val() + \" \" + $( \"#my_vertical\" ).val(),
        at: $( \"#at_horizontal\" ).val() + \" \" + $( \"#at_vertical\" ).val(),
        collision: $( \"#collision_horizontal\" ).val() + \" \" + $( \"#collision_vertical\" ).val()
      });
    }
 
    $( \".positionable\" ).css( \"opacity\", 0.5 );
 
    $( \"select, input\" ).bind( \"click keyup change\", position );
 
    $( \"#parent\" ).draggable({
      drag: position
    });
 
    position();
  });
  </script>
</head>
<body>
 
<div>
  <p>
  这是父元素的位置。
  </p>
</div>
 
<div>
  <p>
  to position
  </p>
</div>
 
<div>
  <p>
  to position 2
  </p>
</div>
 
<div style=\"padding: 20px; margin-top: 75px;\">
  定位...
  <div style=\"padding-bottom: 20px;\">
    <b>my:</b>
    <select>
      <option value=\"left\">left</option>
      <option value=\"center\">center</option>
      <option value=\"right\">right</option>
    </select>
    <select>
      <option value=\"top\">top</option>
      <option value=\"center\">center</option>
      <option value=\"bottom\">bottom</option>
    </select>
  </div>
  <div style=\"padding-bottom: 20px;\">
    <b>at:</b>
    <select>
      <option value=\"left\">left</option>
      <option value=\"center\">center</option>
      <option value=\"right\">right</option>
    </select>
    <select>
      <option value=\"top\">top</option>
      <option value=\"center\">center</option>
      <option value=\"bottom\">bottom</option>
    </select>
  </div>
  <div style=\"padding-bottom: 20px;\">
    <b>collision:</b>
    <select>
      <option value=\"flip\">flip</option>
      <option value=\"fit\">fit</option>
      <option value=\"flipfit\">flipfit</option>
      <option value=\"none\">none</option>
    </select>
    <select>
      <option value=\"flip\">flip</option>
      <option value=\"fit\">fit</option>
      <option value=\"flipfit\">flipfit</option>
      <option value=\"none\">none</option>
    </select>
  </div>
</div>
 
 
</body>
</html>

图像循环

一个照片浏览器的原型，使用 Position 分别把图片定为在左边、中间、右边，然后循环显示。使用顶部的链接来循环图像，或者在图像的左侧或右侧点击来循环图像。请注意，当调整窗口大小时，会重新定位图像。

<!doctype html>
<html lang=\"en\">
<head>
  <meta charset=\"utf-8\">
  <title>jQuery UI 定位（Position） - 图像循环</title>
  <link rel=\"stylesheet\" href=\"//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css\">
  <script src=\"//code.jquery.com/jquery-1.9.1.js\"></script>
  <script src=\"//code.jquery.com/ui/1.10.4/jquery-ui.js\"></script>
  <link rel=\"stylesheet\" href=\"http://jqueryui.com/resources/demos/style.css\">
  <style>
  body {
    margin: 0;
  }
  #container {
    overflow: hidden;
    position: relative;
    height: 400px;
  }
 
  img {
    position: absolute;
  }
  </style>
  <script>
  $(function() {
    // 重构部件，去除这些插件方法
    $.fn.left = function( using ) {
      return this.position({
        my: \"right middle\",
        at: \"left+25 middle\",
        of: \"#container\",
        collision: \"none\",
        using: using
      });
    };
    $.fn.right = function( using ) {
      return this.position({
        my: \"left middle\",
        at: \"right-25 middle\",
        of: \"#container\",
        collision: \"none\",
        using: using
      });
    };
    $.fn.center = function( using ) {
      return this.position({
        my: \"center middle\",
        at: \"center middle\",
        of: \"#container\",
        using: using
      });
    };
 
    $( \"img:eq(0)\" ).left();
    $( \"img:eq(1)\" ).center();
    $( \"img:eq(2)\" ).right();
 
    function animate( to ) {
      $( this ).stop( true, false ).animate( to );
    }
    function next( event ) {
      event.preventDefault();
      $( \"img:eq(2)\" ).center( animate );
      $( \"img:eq(1)\" ).left( animate );
      $( \"img:eq(0)\" ).right().appendTo( \"#container\" );
    }
    function previous( event ) {
      event.preventDefault();
      $( \"img:eq(0)\" ).center( animate );
      $( \"img:eq(1)\" ).right( animate );
      $( \"img:eq(2)\" ).left().prependTo( \"#container\" );
    }
    $( \"#previous\" ).click( previous );
    $( \"#next\" ).click( next );
 
    $( \"img\" ).click(function( event ) {
      $( \"img\" ).index( this ) === 0 ? previous( event ) : next( event );
    });
 
    $( window ).resize(function() {
      $( \"img:eq(0)\" ).left( animate );
      $( \"img:eq(1)\" ).center( animate );
      $( \"img:eq(2)\" ).right( animate );
    });
  });
  </script>
</head>
<body>
 
<div>
  <img loading=\"lazy\" src=\"/wp-content/uploads/2014/03/earth.jpg\" width=\"458\" height=\"308\" alt=\"earth\">
  <img loading=\"lazy\" src=\"/wp-content/uploads/2014/03/flight.jpg\" width=\"512\" height=\"307\" alt=\"flight\">
  <img loading=\"lazy\" src=\"/wp-content/uploads/2014/03/rocket.jpg\" width=\"300\" height=\"353\" alt=\"rocket\">
 
  <a href=\"#\">上一个</a>
  <a href=\"#\">下一个</a>
</div>
 
 
</body>
</html>