jQuery UI 实例 - 定位(Position)
jQuery UI 实例 - 定位(Position)
概述
jQuery UI 提供的 Position 用于组件定位,帮助开发者解决元素定位问题,同时支持自定义定位算法。Position 支持多种设置选项,如自动调整位置、碰撞检测等。本文将对定位(Position)进行详细的介绍和实例演示。
基本语法
$(selector).position({
my: "center",
at: "center",
of: window
});
- my:定位元素的位置锚点,默认值为 “center”,同时支持纵向和横向分开设置,如 “top center”、“left center” 等;
- at:参照元素的位置锚点,默认值为 “center”,同时支持与 my 锚点不同的设置,如 “bottom right”、“center left” 等;
- of:参照元素,默认为浏览器窗口,可以是选择器、jQuery 对象、DOM 对象或事件对象。
选项参数
Position 还支持多种选项参数,方便进行更加精细化的定位:
- collision:碰撞检测函数,即元素定位时进行碰撞检测,是否需要进行位置调整。如需要就设置为 “fit”,否则为 “flip” 或 false;
- using:自定义位置调整函数,可以自行定义一个函数实现定位位置的调整。
实例演示
接下来,我们以 Position 实现气泡组件浮现的示例进行演示。具体实现代码如下:
<div class="bubble"></div>
<button id="btn">click me!</button>
.bubble {
position: absolute;
background-color: #78B9D0;
color: #fff;
padding: 10px;
border-radius: 5px;
box-shadow: 3px 3px 8px #999;
display: none;
}
$(document).ready(function() {
$("#btn").click(function() {
$(".bubble").position({
my: "left top",
at: "right top",
of: $(this),
collision: "flip",
using: function(pos, info) {
$(this).css({
"left": pos.left+10+"px",
"top": pos.top+10+"px",
"display": "block"
});
}
});
});
});
- my:定位元素的左上角顶点与参照元素的左上角顶点对齐,方便进行气泡组件浮现;
- at:定位元素的左上角顶点与参照元素的右上角顶点对齐;
- of:参照元素为按钮组件;
- collision:碰撞检测函数为“翻转”,即碰到浏览器窗口边缘时自动翻转;
- using:使用自定义函数调整气泡组件的位置,向右下移动 10 像素。
结论
通过本文的介绍和实例演示,相信大家已经对 Position 定位有了更深刻的了解。在实际开发中,Position 不仅仅能够帮助我们解决定位问题,同时也能够提高我们开发效率,减少我们的工作量。