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

Question

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

我有一个带有弹出窗口的过滤器部分(弹出窗口相对于过滤器<li>标签绝对定位):

它在桌面上看起来很漂亮和花花公子,但在横向模式的Ipad上,弹出窗口的底部被切断,因为它超出了视口.

我尝试使用queryUI位置解决它:

$('.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 
});

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

我还需要确保三角形相应移动,因为它应始终指向正确的滤波器.

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

这是一个非常简化的小提琴

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和 设置两者都会挤压弹出窗口。

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