jQuery UI position定位引擎全解my、at、flip、collision四大参数让元素精准落位【免费下载链接】jquery-uiThe official jQuery user interface library.项目地址: https://gitcode.com/gh_mirrors/jq/jquery-uijQuery UI 的 position 定位引擎是一个核心级工具属于 Core 分组源码见 ui/position.js它能把任意元素精确地贴在另一个元素、窗口或鼠标事件旁边。本文用最通俗的方式讲透 my、at、flip、collision 四大参数配合演示页和真实组件案例让你几行代码就让弹出层、气泡提示、图片轮播精准落位不写一行复杂计算。一、为什么需要 position 定位引擎日常开发中我们常遇到这类需求下拉框autocomplete的候选列表要挂在输入框正下方气泡提示tooltip要紧跟鼠标或目标元素出了屏幕还要自动翻转图片轮播cycler要把三张图分别定位到容器的左、中、右。手写offset() 尺寸计算很容易在滚动、边距、翻转时出错。而 jQuery UI 把这套逻辑封装成了一个统一入口$( #box ).position({ of: #target, // 参照物元素、窗口或鼠标事件 my: left top, // 自身哪个点对齐 at: left bottom, // 参照物哪个点被对齐 collision: flip // 碰撞处理策略 });官方演示页 demos/position/default.html 提供了可视化控制面板可以拖拽参照元素、切换 my / at / collision 的取值直观观察定位与碰撞检测效果是理解本引擎的最佳起点。二、my 与 at定位的两把标尺position 的本质是把自己的某个点放到参照物的某个点上这两个点分别由my和at描述参数含义取值my自身元素上被对齐的点水平left/center/right垂直top/center/bottomat参照物上被对齐的点同上of参照物本身元素选择器、window甚至鼠标事件对象两个常见组合速记my: left top, at: left bottom→ 自身左上角贴到参照物左下角弹出层典型用法my: center, at: center→ 自身完全居中于参照物。在 ui/position.js 中可以看到容错逻辑只写一个词时自动补全如my: left会被补成left center写错或留空则一律回退为center center所以即使只给一个方位词也不会报错。偏移量像素与百分比方位词后面还可以加/-数字支持像素和百分比例如my: left top15, // 自身左上角再向下偏移 15px at: left25 bottom // 参照物锚点向右偏移 25px官方演示的图片轮播 demos/position/cycler.html 就利用了at: left25 middle/at: right-25 middle这种写法让左右两张图片恰好被中心图遮住 25px做出图片堆叠效果——偏移量是做出精致布局的关键细节。三、collisionflip、fit、flipfit 三种碰撞策略当定位结果会跑出可视区域窗口或within指定的容器时collision参数决定如何补救。它可分别指定水平和垂直方向取值有四种策略行为适用场景flip空间不够就翻到另一侧下→上右→左tooltip、下拉菜单fit平移到边界内绝不翻转必须保持在某区域内的浮层flipfit先 flip 再 fit 兜底最稳妥的通用选择none不做任何处理轮播、绝对装饰元素默认值是flip见 ui/position.js且只写一个值时会自动应用到两个方向ui/position.js。实现代码集中在 ui/position.js 的$.ui.position对象中flip负责翻转、fit负责贴边平移、flipfit则是前两者的顺序组合。 记忆口诀flip 会转身fit 会贴墙flipfit 先转身再贴墙。四、真实组件案例tooltip 与 autocomplete 如何调参jQuery UI 自己的组件就是 position 引擎的最佳官方配方直接抄作业即可气泡提示 tooltipui/widgets/tooltip.jsmy: left top15, // 提示框左上角再往下错开 15px 留出间距 at: left bottom, // 贴在目标元素左下角 collision: flipfit flip // 水平方向优先翻转垂直方向先翻转再贴边这组参数让 tooltip 默认显示在元素下方、离鼠标有 15px 呼吸感一旦快出屏幕就自动翻到上方——正是前文四大参数协同工作的标准范例。自动补全 autocompleteui/widgets/autocomplete.jsmy: left top, collision: none // 下拉列表不参与碰撞计算靠自身滚动条解决溢出两个案例对照即可看出collision的选择取决于组件形态——短小的气泡需要翻转长列表则更适合none加内部滚动。五、新手实用技巧清单参照物可以是鼠标事件传入事件对象时如 tooltip 跟随鼠标position 会自动取event.pageX / pageY作为锚点ui/position.js无需自己换算坐标。用within限定活动范围把参数里的collision范围从窗口缩小到某个容器适合弹窗内定位。窗口缩放时重新定位cycler 演示在resize事件中重跑定位demos/position/cycler.html这是保证响应式布局不跑位的标准做法。用using回调做动画定位完成后可拿到新旧坐标配合animate实现平滑移动轮播演示正是这样做的。调试先看默认演示打开 demos/position/default.html用下拉框逐项切换 my / at / collision 组合比背文档快得多。六、参考文件清单引擎核心源码ui/position.js可视化参数演示demos/position/default.html图片轮播实战示例demos/position/cycler.html演示入口页demos/position/index.html消费方案例ui/widgets/tooltip.js、ui/widgets/autocomplete.js掌握 my自身锚点、at参照锚点、flip / fit / flipfit碰撞策略这套组合拳后jQuery UI 中 tooltip、dialog、autocomplete 等几乎所有浮动组件的定位行为对你都不再是黑盒照着组件源码抄配方就能快速构建自己的精准定位效果。【免费下载链接】jquery-uiThe official jQuery user interface library.项目地址: https://gitcode.com/gh_mirrors/jq/jquery-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 jQuery UI position定位引擎全解：my、at、flip、collision四大参数让元素精准落位
jQuery UI position定位引擎全解my、at、flip、collision四大参数让元素精准落位【免费下载链接】jquery-uiThe official jQuery user interface library.项目地址: https://gitcode.com/gh_mirrors/jq/jquery-uijQuery UI 的 position 定位引擎是一个核心级工具属于 Core 分组源码见 ui/position.js它能把任意元素精确地贴在另一个元素、窗口或鼠标事件旁边。本文用最通俗的方式讲透 my、at、flip、collision 四大参数配合演示页和真实组件案例让你几行代码就让弹出层、气泡提示、图片轮播精准落位不写一行复杂计算。一、为什么需要 position 定位引擎日常开发中我们常遇到这类需求下拉框autocomplete的候选列表要挂在输入框正下方气泡提示tooltip要紧跟鼠标或目标元素出了屏幕还要自动翻转图片轮播cycler要把三张图分别定位到容器的左、中、右。手写offset() 尺寸计算很容易在滚动、边距、翻转时出错。而 jQuery UI 把这套逻辑封装成了一个统一入口$( #box ).position({ of: #target, // 参照物元素、窗口或鼠标事件 my: left top, // 自身哪个点对齐 at: left bottom, // 参照物哪个点被对齐 collision: flip // 碰撞处理策略 });官方演示页 demos/position/default.html 提供了可视化控制面板可以拖拽参照元素、切换 my / at / collision 的取值直观观察定位与碰撞检测效果是理解本引擎的最佳起点。二、my 与 at定位的两把标尺position 的本质是把自己的某个点放到参照物的某个点上这两个点分别由my和at描述参数含义取值my自身元素上被对齐的点水平left/center/right垂直top/center/bottomat参照物上被对齐的点同上of参照物本身元素选择器、window甚至鼠标事件对象两个常见组合速记my: left top, at: left bottom→ 自身左上角贴到参照物左下角弹出层典型用法my: center, at: center→ 自身完全居中于参照物。在 ui/position.js 中可以看到容错逻辑只写一个词时自动补全如my: left会被补成left center写错或留空则一律回退为center center所以即使只给一个方位词也不会报错。偏移量像素与百分比方位词后面还可以加/-数字支持像素和百分比例如my: left top15, // 自身左上角再向下偏移 15px at: left25 bottom // 参照物锚点向右偏移 25px官方演示的图片轮播 demos/position/cycler.html 就利用了at: left25 middle/at: right-25 middle这种写法让左右两张图片恰好被中心图遮住 25px做出图片堆叠效果——偏移量是做出精致布局的关键细节。三、collisionflip、fit、flipfit 三种碰撞策略当定位结果会跑出可视区域窗口或within指定的容器时collision参数决定如何补救。它可分别指定水平和垂直方向取值有四种策略行为适用场景flip空间不够就翻到另一侧下→上右→左tooltip、下拉菜单fit平移到边界内绝不翻转必须保持在某区域内的浮层flipfit先 flip 再 fit 兜底最稳妥的通用选择none不做任何处理轮播、绝对装饰元素默认值是flip见 ui/position.js且只写一个值时会自动应用到两个方向ui/position.js。实现代码集中在 ui/position.js 的$.ui.position对象中flip负责翻转、fit负责贴边平移、flipfit则是前两者的顺序组合。 记忆口诀flip 会转身fit 会贴墙flipfit 先转身再贴墙。四、真实组件案例tooltip 与 autocomplete 如何调参jQuery UI 自己的组件就是 position 引擎的最佳官方配方直接抄作业即可气泡提示 tooltipui/widgets/tooltip.jsmy: left top15, // 提示框左上角再往下错开 15px 留出间距 at: left bottom, // 贴在目标元素左下角 collision: flipfit flip // 水平方向优先翻转垂直方向先翻转再贴边这组参数让 tooltip 默认显示在元素下方、离鼠标有 15px 呼吸感一旦快出屏幕就自动翻到上方——正是前文四大参数协同工作的标准范例。自动补全 autocompleteui/widgets/autocomplete.jsmy: left top, collision: none // 下拉列表不参与碰撞计算靠自身滚动条解决溢出两个案例对照即可看出collision的选择取决于组件形态——短小的气泡需要翻转长列表则更适合none加内部滚动。五、新手实用技巧清单参照物可以是鼠标事件传入事件对象时如 tooltip 跟随鼠标position 会自动取event.pageX / pageY作为锚点ui/position.js无需自己换算坐标。用within限定活动范围把参数里的collision范围从窗口缩小到某个容器适合弹窗内定位。窗口缩放时重新定位cycler 演示在resize事件中重跑定位demos/position/cycler.html这是保证响应式布局不跑位的标准做法。用using回调做动画定位完成后可拿到新旧坐标配合animate实现平滑移动轮播演示正是这样做的。调试先看默认演示打开 demos/position/default.html用下拉框逐项切换 my / at / collision 组合比背文档快得多。六、参考文件清单引擎核心源码ui/position.js可视化参数演示demos/position/default.html图片轮播实战示例demos/position/cycler.html演示入口页demos/position/index.html消费方案例ui/widgets/tooltip.js、ui/widgets/autocomplete.js掌握 my自身锚点、at参照锚点、flip / fit / flipfit碰撞策略这套组合拳后jQuery UI 中 tooltip、dialog、autocomplete 等几乎所有浮动组件的定位行为对你都不再是黑盒照着组件源码抄配方就能快速构建自己的精准定位效果。【免费下载链接】jquery-uiThe official jQuery user interface library.项目地址: https://gitcode.com/gh_mirrors/jq/jquery-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考