55面试教程网 jQuery UI 技术教程
jQuery UI 技术教程
jQuery UI 教程jQuery UI 简介jQuery UI 下载jQuery UI 使用jQuery UI 定制jQuery UI 工作原理jQuery UI 主题jQuery UI ThemeRollerjQuery UI CSS 框架 APIjQuery UI 设计主题jQuery UI 部件库jQuery UI 通过部件库扩展小部件jQuery UI 小部件方法调用jQuery UI 为什么使用部件库jQuery UI 如何使用部件库jQuery UI API 文档jQuery UI API 类别 – 特效jQuery UI API 类别 – 特效核心jQuery UI API 类别 – 交互jQuery UI API 类别 – 方法重载jQuery UI API 类别 – 方法jQuery UI API 类别 – 选择器jQuery UI API 类别 – 主题jQuery UI API 类别 – UI 核心jQuery UI API 类别 – 实用工具jQuery UI API 类别 – 小部件jQuery UI 实例jQuery UI 实例 – 拖动(Draggable)jQuery UI 实例 – 放置(Droppable)jQuery UI 实例 – 缩放(Resizable)jQuery UI 实例 – 选择(Selectable)jQuery UI 实例 – 排序(Sortable)jQuery UI 实例 – 折叠面板(Accordion)jQuery UI 实例 – 自动完成(Autocomplete)jQuery UI 实例 – 按钮(Button)jQuery UI 实例 – 日期选择器(Datepicker)jQuery UI 实例 – 对话框(Dialog)jQuery UI 实例 – 菜单(Menu)jQuery UI 实例 – 进度条(Progressbar)jQuery UI 实例 – 滑块(Slider)jQuery UI 实例 – 旋转器(Spinner)jQuery UI 实例 – 标签页(Tabs)jQuery UI 实例 – 工具提示框(Tooltip)jQuery UI 实例 – 特效(Effect)jQuery UI 实例 – 显示(Show)jQuery UI 实例 – 隐藏(Hide)jQuery UI 实例 – 切换(Toggle)jQuery UI 实例 – 添加 Class(Add Class)jQuery UI 实例 – 移除 Class(Remove Class)jQuery UI 实例 – 切换 Class(Toggle Class)jQuery UI 实例 – 转换 Class(Switch Class)jQuery UI 实例 – 颜色动画(Color Animation)jQuery UI 实例 – 定位(Position)jQuery UI 实例 – 部件库(Widget Factory)

jQuery UI 实例 – 定位(Position)

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 id="parent">
  <p>
  这是父元素的位置。
  </p>
</div>
 
<div class="positionable" id="positionable1">
  <p>
  to position
  </p>
</div>
 
<div class="positionable" id="positionable2">
  <p>
  to position 2
  </p>
</div>
 
<div style="padding: 20px; margin-top: 75px;">
  定位...
  <div style="padding-bottom: 20px;">
    <b>my:</b>
    <select id="my_horizontal">
      <option value="left">left</option>
      <option value="center">center</option>
      <option value="right">right</option>
    </select>
    <select id="my_vertical">
      <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 id="at_horizontal">
      <option value="left">left</option>
      <option value="center">center</option>
      <option value="right">right</option>
    </select>
    <select id="at_vertical">
      <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 id="collision_horizontal">
      <option value="flip">flip</option>
      <option value="fit">fit</option>
      <option value="flipfit">flipfit</option>
      <option value="none">none</option>
    </select>
    <select id="collision_vertical">
      <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 id="container">
  <img src="/myimage/a9e2f851d07e9d4c193c5860637be0e1.jpg" width="458" height="308" alt="earth">
  <img src="/myimage/f3aa3b03af0e88bc342f8aaa37a76f51.jpg" width="512" height="307" alt="flight">
  <img src="/myimage/e09efd7fbd86a1a6353dba0f79546063.jpg" width="300" height="353" alt="rocket">
 
  <a id="previous" href="#">上一个</a>
  <a id="next" href="#">下一个</a>
</div>
 
 
</body>
</html>