当前位置：首页 > news >正文

jQuery UI 实例 - 定位（Position）

news 2026/6/28 14:57:22

jQuery UI Position（定位）实例

Position是 jQuery UI 中非常实用的工具方法，用于将一个元素精确地定位到另一个元素（或页面、窗口）的相对位置。它支持碰撞检测（collision）、偏移（offset）、自动调整等功能，常用于实现工具提示（Tooltip）、下拉菜单、上下文菜单、对话框居中、气泡提示、拖拽吸附等场景。

官方文档：https://jqueryui.com/position/

下面提供几个渐进实例，从基础到高级，代码使用最新 CDN，可直接复制到 HTML 文件测试。

1.基础定位（相对目标元素）

将一个元素定位到另一个元素的指定位置。

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>jQuery UI Position 基础示例</title><linkrel="stylesheet"href="//code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css"><scriptsrc="//code.jquery.com/jquery-3.6.0.min.js"></script><scriptsrc="//code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script><style>#target{width:150px;height:100px;background:#3498db;margin:100px auto;position:relative;}#positioned{width:100px;height:80px;background:#e74c3c;color:white;padding:10px;position:absolute;}</style></head><body><buttonid="pos1">右下角</button><buttonid="pos2">左上角</button><buttonid="pos3">居中</button><divid="target">目标元素</div><divid="positioned">被定位元素</div><script>$(function(){$("#pos1").click(function(){$("#positioned").position({my:"left top",// 被定位元素的参考点at:"right bottom",// 目标元素的参考点of:"#target"// 目标元素});});$("#pos2").click(function(){$("#positioned").position({my:"right bottom",at:"left top",of:"#target"});});$("#pos3").click(function(){$("#positioned").position({my:"center center",at:"center center",of:"#target"});});});</script></body></html>

2.常用选项（offset、collision）

offset: 偏移量（如 “20 30” 表示右移20px、下移30px）。
collision: "flip"：超出视口时自动翻转位置。

<buttonid="tooltipBtn">悬停查看提示</button><divid="tooltip"style="display:none;background:#333;color:white;padding:10px;border-radius:6px;position:absolute;">这是一个工具提示框，支持自动翻转！</div><script>$("#tooltipBtn").hover(function(){$("#tooltip").show().position({my:"left+10 center",at:"right center",of:this,collision:"flipfit"// 先翻转，再适应视口});},function(){$("#tooltip").hide();});</script>

3.定位到鼠标或窗口

常用于自定义上下文菜单或气泡。

<divid="contextMenu"style="display:none;background:#fff;border:1px solid #ccc;padding:10px;box-shadow:0 4px 10pxrgba(0,0,0,0.2);position:absolute;"><ul><li>复制</li><li>粘贴</li><li>删除</li></ul></div><script>$(document).on("contextmenu",function(e){// 右键$("#contextMenu").show().position({my:"left top",at:"left top",of:e,// 定位到鼠标事件offset:"10 10"});e.preventDefault();// 阻止默认右键菜单});$(document).click(function(){$("#contextMenu").hide();});</script>

4.窗口居中 + 动态调整

<buttonid="centerWindow">窗口居中</button><script>$("#centerWindow").click(function(){$("#positioned").position({my:"center center",at:"center center",of:window,// 定位到窗口collision:"none"// 不处理碰撞});});// 窗口大小变化时重新定位$(window).resize(function(){$("#positioned").position({my:"center center",at:"center center",of:window});});</script>