方法重载(Method Overrides) | 方法(Methods) | 实用工具(Utilities)
描述:相对另一个元素定位一个元素。
版本新增:1.8
.position( options )
参数 | 类型 | 描述 |
---|---|---|
options | Object |
|
jQuery UI .position()
方法允许您相对窗体(window)、文档、另一个元素或指针(cursor)/鼠标(mouse)来定位一个元素,无需考虑相对父元素的偏移(offset)。
注释:jQuery UI 不支持定位隐藏元素。
这是一个独立的 jQuery 插件,且对其他 jQuery UI 组件没有依赖关系。
该插件扩展自 jQuery 内置的 .position() 方法。如果 jQuery UI 未加载,调用 .position()
方法不会直接失败,因为该方法在 jQuery 中存在。但是不会发生预期的行为。
一个简单的 jQuery UI 定位(Position)实例。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>.position() 实例</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <style> .positionDiv { position: absolute; width: 75px; height: 75px; background: green; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id="targetElement"> <div class="positionDiv" id="position1"></div> <div class="positionDiv" id="position2"></div> <div class="positionDiv" id="position3"></div> <div class="positionDiv" id="position4"></div> </div> <script> $( "#position1" ).position({ my: "center", at: "center", of: "#targetElement" }); $( "#position2" ).position({ my: "left top", at: "left top", of: "#targetElement" }); $( "#position3" ).position({ my: "right center", at: "right bottom", of: "#targetElement" }); $( document ).mousemove(function( event ) { $( "#position4" ).position({ my: "left+3 bottom-3", of: event, collision: "fit" }); }); </script> </body> </html>