首页 » jQuery UI » jQuery UI 实例
网站地图

定位（Position）

jQuery UI 实例 - 定位（Position）

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

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

默认功能

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 定位（Position） - 默认功能</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   #parent {
  12.     width: 60%;
  13.     height: 40px;
  14.     margin: 10px auto;
  15.     padding: 5px;
  16.     border: 1px solid #777;
  17.     background-color: #fbca93;
  18.     text-align: center;
  19.   }
  20.   .positionable {
  21.     position: absolute;
  22.     display: block;
  23.     right: 0;
  24.     bottom: 0;
  25.     background-color: #bcd5e6;
  26.     text-align: center;
  27.   }
  28.   #positionable1 {
  29.     width: 75px;
  30.     height: 75px;
  31.   }
  32.   #positionable2 {
  33.     width: 120px;
  34.     height: 40px;
  35.   }
  36.   select, input {
  37.     margin-left: 15px;
  38.   }
  39.   </style>
  40.   <script>
  41.   $(function() {
  42.     function position() {
  43.       $( ".positionable" ).position({
  44.         of: $( "#parent" ),
  45.         my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
  46.         at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
  47.         collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
  48.       });
  49.     }
  50.  
  51.     $( ".positionable" ).css( "opacity", 0.5 );
  52.  
  53.     $( "select, input" ).bind( "click keyup change", position );
  54.  
  55.     $( "#parent" ).draggable({
  56.       drag: position
  57.     });
  58.  
  59.     position();
  60.   });
  61.   </script>
  62. </head>
  63. <body>
  64.  
  65. <div id="parent">
  66.   <p>
  67.   这是父元素的位置。
  68.   </p>
  69. </div>
  70.  
  71. <div class="positionable" id="positionable1">
  72.   <p>
  73.   to position
  74.   </p>
  75. </div>
  76.  
  77. <div class="positionable" id="positionable2">
  78.   <p>
  79.   to position 2
  80.   </p>
  81. </div>
  82.  
  83. <div style="padding: 20px; margin-top: 75px;">
  84.   定位...
  85.   <div style="padding-bottom: 20px;">
  86.     <b>my:</b>
  87.     <select id="my_horizontal">
  88.       <option value="left">left</option>
  89.       <option value="center">center</option>
  90.       <option value="right">right</option>
  91.     </select>
  92.     <select id="my_vertical">
  93.       <option value="top">top</option>
  94.       <option value="center">center</option>
  95.       <option value="bottom">bottom</option>
  96.     </select>
  97.   </div>
  98.   <div style="padding-bottom: 20px;">
  99.     <b>at:</b>
  100.     <select id="at_horizontal">
  101.       <option value="left">left</option>
  102.       <option value="center">center</option>
  103.       <option value="right">right</option>
  104.     </select>
  105.     <select id="at_vertical">
  106.       <option value="top">top</option>
  107.       <option value="center">center</option>
  108.       <option value="bottom">bottom</option>
  109.     </select>
  110.   </div>
  111.   <div style="padding-bottom: 20px;">
  112.     <b>collision:</b>
  113.     <select id="collision_horizontal">
  114.       <option value="flip">flip</option>
  115.       <option value="fit">fit</option>
  116.       <option value="flipfit">flipfit</option>
  117.       <option value="none">none</option>
  118.     </select>
  119.     <select id="collision_vertical">
  120.       <option value="flip">flip</option>
  121.       <option value="fit">fit</option>
  122.       <option value="flipfit">flipfit</option>
  123.       <option value="none">none</option>
  124.     </select>
  125.   </div>
  126. </div>
  127.  
  128.  
  129. </body>
  130. </html>

图像循环

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

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 定位（Position） - 图像循环</title>
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  10.   <style>
  11.   body {
  12.     margin: 0;
  13.   }
  14.   #container {
  15.     overflow: hidden;
  16.     position: relative;
  17.     height: 400px;
  18.   }
  19.  
  20.   img {
  21.     position: absolute;
  22.   }
  23.   </style>
  24.   <script>
  25.   $(function() {
  26.     // 重构部件，去除这些插件方法
  27.     $.fn.left = function( using ) {
  28.       return this.position({
  29.         my: "right middle",
  30.         at: "left+25 middle",
  31.         of: "#container",
  32.         collision: "none",
  33.         using: using
  34.       });
  35.     };
  36.     $.fn.right = function( using ) {
  37.       return this.position({
  38.         my: "left middle",
  39.         at: "right-25 middle",
  40.         of: "#container",
  41.         collision: "none",
  42.         using: using
  43.       });
  44.     };
  45.     $.fn.center = function( using ) {
  46.       return this.position({
  47.         my: "center middle",
  48.         at: "center middle",
  49.         of: "#container",
  50.         using: using
  51.       });
  52.     };
  53.  
  54.     $( "img:eq(0)" ).left();
  55.     $( "img:eq(1)" ).center();
  56.     $( "img:eq(2)" ).right();
  57.  
  58.     function animate( to ) {
  59.       $( this ).stop( true, false ).animate( to );
  60.     }
  61.     function next( event ) {
  62.       event.preventDefault();
  63.       $( "img:eq(2)" ).center( animate );
  64.       $( "img:eq(1)" ).left( animate );
  65.       $( "img:eq(0)" ).right().appendTo( "#container" );
  66.     }
  67.     function previous( event ) {
  68.       event.preventDefault();
  69.       $( "img:eq(0)" ).center( animate );
  70.       $( "img:eq(1)" ).right( animate );
  71.       $( "img:eq(2)" ).left().prependTo( "#container" );
  72.     }
  73.     $( "#previous" ).click( previous );
  74.     $( "#next" ).click( next );
  75.  
  76.     $( "img" ).click(function( event ) {
  77.       $( "img" ).index( this ) === 0 ? previous( event ) : next( event );
  78.     });
  79.  
  80.     $( window ).resize(function() {
  81.       $( "img:eq(0)" ).left( animate );
  82.       $( "img:eq(1)" ).center( animate );
  83.       $( "img:eq(2)" ).right( animate );
  84.     });
  85.   });
  86.   </script>
  87. </head>
  88. <body>
  89.  
  90. <div id="container">
  91.   <img src="/wp-content/uploads/2014/03/earth.jpg" width="458" height="308" alt="earth">
  92.   <img src="/wp-content/uploads/2014/03/flight.jpg" width="512" height="307" alt="flight">
  93.   <img src="/wp-content/uploads/2014/03/rocket.jpg" width="300" height="353" alt="rocket">
  94.  
  95.   <a id="previous" href="#">上一个</a>
  96.   <a id="next" href="#">下一个</a>
  97. </div>
  98.  
  99.  
  100. </body>
  101. </html>