6

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

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

在此处输入图像描述

这一切在桌面上看起来都不错,但在横向模式下的 Ipad 上,弹出窗口的底部被切掉了,因为它超出了视口。

我尝试使用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 
});

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

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

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

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

4

1 回答 1

3

好的,看起来最大的问题是它"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, 并且设置两者都会挤压弹出窗口。

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

于 2013-11-26T16:31:27.483 回答