# jQuery UI 实例 - 定位(Position)
相对窗口、文档、锚、光标/鼠标等元素定位一个元素。
如需了解更多有关 `.position()` 方法的细节,请查看 API 文档 [.position()](api-position.html)。
## 默认功能
使用表单控件配置位置,或者拖拽被定位的元素来修改它的偏移量。向四周拖拽父元素来查看碰撞检测。
```
<!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="img/earth.jpg" width="458" height="308" alt="earth">
<img src="img/flight.jpg" width="512" height="307" alt="flight">
<img src="img/rocket.jpg" width="300" height="353" alt="rocket">
<a id="previous" href="#">上一个</a>
<a id="next" href="#">下一个</a>
</div>
</body>
</html>
```
- jQuery UI 基础
- jQuery UI 简介
- jQuery UI 下载
- jQuery UI 使用
- jQuery UI 定制
- jQuery UI 工作原理
- jQuery UI 主题
- jQuery UI 主题
- jQuery UI ThemeRoller
- jQuery UI CSS 框架 API
- jQuery UI 设计主题
- jQuery UI 部件库
- jQuery UI 部件库(Widget Factory)
- jQuery UI 通过部件库(Widget Factory)扩展小部件
- jQuery UI 小部件(Widget)方法调用
- jQuery UI 为什么使用部件库(Widget Factory)
- jQuery UI 如何使用部件库(Widget Factory)
- jQuery UI 实例
- 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 API 参考
- jQuery UI API 类别 - 特效(Effects)
- jQuery UI API - .addClass()
- jQuery UI API - 百叶窗特效(Blind Effect)
- jQuery UI API - 反弹特效(Bounce Effect)
- jQuery UI API - 剪辑特效(Clip Effect)
- jQuery UI API - 颜色动画(Color Animation)
- jQuery UI API - 降落特效(Drop Effect)
- jQuery UI API - Easings
- jQuery UI API - .effect()
- jQuery UI API - 爆炸特效(Explode Effect)
- jQuery UI API - 淡入淡出特效(Fade Effect)
- jQuery UI API - 折叠特效(Fold Effect)
- jQuery UI API - .hide()
- jQuery UI API - 突出特效(Highlight Effect)
- jQuery UI API - 膨胀特效(Puff Effect)
- jQuery UI API - 跳动特效(Pulsate Effect)
- jQuery UI API - .removeClass()
- jQuery UI API - 缩放特效(Scale Effect)
- jQuery UI API - 震动特效(Shake Effect)
- jQuery UI API - .show()
- jQuery UI API - 尺寸特效(Size Effect)
- jQuery UI API - 滑动特效(Slide Effect)
- jQuery UI API - .switchClass()
- jQuery UI API - .toggle()
- jQuery UI API - .toggleClass()
- jQuery UI API - 转移特效(Transfer Effect)
- jQuery UI API 类别 - 特效核心(Effects Core)
- jQuery UI API - 颜色动画(Color Animation)
- jQuery UI API 类别 - 交互(Interactions)
- jQuery UI API - 可拖拽小部件(Draggable Widget)
- jQuery UI API - 可放置小部件(Droppable Widget)
- jQuery UI API - 鼠标交互(Mouse Interaction)
- jQuery UI API - 可调整尺寸小部件(Resizable Widget)
- jQuery UI API - 可选择小部件(Selectable Widget)
- jQuery UI API - 可排序小部件(Sortable Widget)
- jQuery UI API 类别 - 方法重载(Method Overrides)
- jQuery UI API - .focus()
- jQuery UI API - .position()
- jQuery UI API 类别 - 方法(Methods)
- jQuery UI API - .disableSelection()
- jQuery UI API - .enableSelection()
- jQuery UI API - .removeUniqueId()
- jQuery UI API - .scrollParent()
- jQuery UI API - .uniqueId()
- jQuery UI API - .zIndex()
- jQuery UI API 类别 - 选择器(Selectors)
- jQuery UI API - :data() Selector
- jQuery UI API - :focusable Selector
- jQuery UI API - :tabbable Selector
- jQuery UI API 类别 - 主题(Theming)
- jQuery UI API - CSS 框架(CSS Framework)
- jQuery UI API - 图标(Icons)
- jQuery UI API - 堆叠元素(Stacking Elements)
- jQuery UI API 类别 - UI 核心(UI Core)
- jQuery UI API 类别 - 实用工具(Utilities)
- jQuery UI API - 部件库(Widget Factory)
- jQuery UI API - 插件桥(Widget Plugin Bridge)
- jQuery UI API 类别 - 小部件(Widgets)
- jQuery UI API - 折叠面板部件(Accordion Widget)
- jQuery UI API - 自动完成部件(Autocomplete Widget)
- jQuery UI API - 按钮部件(Button Widget)
- jQuery UI API - 日期选择器部件(Datepicker Widget)
- jQuery UI API - 对话框部件(Dialog Widget)
- jQuery UI API - 菜单部件(Menu Widget)
- jQuery UI API - 进度条部件(Progressbar Widget)
- jQuery UI API - 滑块部件(Slider Widget)
- jQuery UI API - 旋转器部件(Spinner Widget)
- jQuery UI API - 标签页部件(Tabs Widget)
- jQuery UI API - 工具提示框部件(Tooltip Widget)
- jQuery EasyUI 简介
- jQuery EasyUI 应用
- jQuery EasyUI 应用 - 创建 CRUD 应用
- jQuery EasyUI 应用 - 创建 CRUD 数据网格(DataGrid)
- jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用
- jQuery EasyUI 应用 - 创建 RSS Feed 阅读器
- jQuery EasyUI 拖放
- jQuery EasyUI 拖放 - 基本的拖动和放置
- jQuery EasyUI 拖放 - 创建拖放的购物车
- jQuery EasyUI 拖放 - 创建学校课程表
- jQuery EasyUI 菜单与按钮
- jQuery EasyUI 菜单与按钮 - 创建简单的菜单
- jQuery EasyUI 菜单与按钮 - 创建链接按钮(Link Button)
- jQuery EasyUI 菜单与按钮 - 创建菜单按钮(Menu Button)
- jQuery EasyUI 菜单与按钮 - 创建分割按钮(Split Button)
- jQuery EasyUI 布局
- jQuery EasyUI 布局 - 为网页创建边框布局
- jQuery EasyUI 布局 - 在面板中创建复杂布局
- jQuery EasyUI 布局 - 创建折叠面板
- jQuery EasyUI 布局 - 创建标签页(Tabs)
- jQuery EasyUI 布局 - 动态添加标签页(Tabs)
- jQuery EasyUI 布局 - 添加自动播放标签页(Tabs)
- jQuery EasyUI 布局 - 创建 XP 风格左侧面板
- jQuery EasyUI 数据网格
- jQuery EasyUI 数据网格 - 转换 HTML 表格为数据网格
- jQuery EasyUI 数据网格 - 取得选中行数据
- jQuery EasyUI 数据网格 - 添加查询功能
- jQuery EasyUI 数据网格 - 添加工具栏
- jQuery EasyUI 数据网格 - 创建复杂工具栏
- jQuery EasyUI 数据网格 - 设置冻结列
- jQuery EasyUI 数据网格 - 动态改变列
- jQuery EasyUI 数据网格 - 格式化列
- jQuery EasyUI 数据网格 - 设置排序
- jQuery EasyUI 数据网格 - 自定义排序
- jQuery EasyUI 数据网格 - 创建列组合
- jQuery EasyUI 数据网格 - 添加复选框
- jQuery EasyUI 数据网格 - 自定义分页
- jQuery EasyUI 数据网格 - 启用行内编辑
- jQuery EasyUI 数据网格 - 扩展编辑器
- jQuery EasyUI 数据网格 - 列运算
- jQuery EasyUI 数据网格 - 合并单元格
- jQuery EasyUI 数据网格 - 创建自定义视图
- jQuery EasyUI 数据网格 - 创建页脚摘要
- jQuery EasyUI 数据网格 - 条件设置行背景颜色
- jQuery EasyUI 数据网格 - 创建属性网格
- jQuery EasyUI 数据网格 - 扩展行显示细节
- jQuery EasyUI 数据网格 - 创建子网格
- jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据
- jQuery EasyUI 数据网格 - 添加分页组件
- jQuery EasyUI 窗口
- jQuery EasyUI 窗口 - 创建简单窗口
- jQuery EasyUI 窗口 - 自定义窗口工具栏
- jQuery EasyUI 窗口 - 窗口与布局
- jQuery EasyUI 窗口 - 创建对话框
- jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框
- jQuery EasyUI 树形菜单
- jQuery EasyUI 树形菜单 - 使用标记创建树形菜单
- jQuery EasyUI 树形菜单 - 创建异步树形菜单
- jQuery EasyUI 树形菜单 - 树形菜单添加节点
- jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
- jQuery EasyUI 树形菜单 - 树形菜单拖放控制
- jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点
- jQuery EasyUI 树形菜单 - 创建基础树形网格
- jQuery EasyUI 树形菜单 - 创建复杂树形网格
- jQuery EasyUI 树形菜单 - 树形网格动态加载
- jQuery EasyUI 树形菜单 - 树形网格添加分页
- jQuery EasyUI 树形菜单 - 树形网格惰性加载节点
- jQuery EasyUI 表单
- jQuery EasyUI 表单 - 创建异步提交表单
- jQuery EasyUI 表单 - 表单验证
- jQuery EasyUI 表单 - 创建树形下拉框
- jQuery EasyUI 表单 - 格式化下拉框
- jQuery EasyUI 表单 - 过滤下拉数据网格
- jQuery EasyUI 插件
- jQuery EasyUI 扩展
- 免责声明