弹出窗口的 JavaScript/Jquery 碰撞检测

Question

我正在编写一个应该在 iPad 和桌面浏览器上运行的网络应用程序。

我有一个过滤器部分，弹出窗口来自侧面(弹出窗口相对于过滤器 <li> 标记绝对定位):

它在桌面上看起来很不错，但在横向模式下的 Ipad 上，弹出窗口的底部被切掉了，因为它超出了视口(viewport)。

我尝试使用 queryUI position 解决它:

$('.capbIpadPopupAutoComplete').position({
    "my": "left center" ,      //  Horizontal then vertical, missing values default to center
    "at": "left top",     //  Horizontal then vertical, missing values default to center
    "of": $(this).closest('li'),     //  Element to position against 
    // "offset": "20 30" ,      //  Pixel values for offset, Horizontal then vertical, negative values OK
    "collision": "fit flip" //  What to do in case of 
});

但这只有在弹出窗口与屏幕左侧而不是底部发生碰撞时才有效。

我还需要确保三 Angular 形相应地移动，因为它应该始终指向正确的过滤器。

我使用的 JqueryUI 位置错了吗？有更好的解决方案吗？

Here is a very simplified fiddle

Answer 1

好吧，看起来最大的问题是 "flip fit" 实际上不是 collision 的有效值。 (我认为它被视为 "flip"。)您可能正在寻找 "flipfit"(无空格)，或者可能只是 "fit"。您还应确保将弹出窗口的 右侧 与 li 的左侧对齐 - 将左侧与左侧对齐会使它们重叠，然后翻转，因为没有足够的空间。我调整了你的代码并让它运行得更好(但仍然不完美；你必须调整它)。

$('.capbIpadPopupAutoComplete').position({
    "my": "right top" ,      //  Horizontal then vertical, missing values default to center
    "at": "left top",     //  Horizontal then vertical, missing values default to center
    "of": $('.capbStrategicPlan'),     //  Element to position against 
    // "offset": "20 30" ,      //  Pixel values for offset, Horizontal then vertical, negative values OK
    "collision": "fit" //  What to do in case of 
});

$(this) 似乎在 of 参数中不起作用，所以我替换了它。

您还需要不设置弹出窗口的 right 值，因为 .position 设置 left，并且设置两者都会压缩弹出窗口.

至于箭头，你为什么不把它们分开放置呢？如果弹出窗口必须稍微移动一点，它会与箭头重叠一些，但这只会让箭头看起来更小。