知道位置碰撞何时在 jQuery UI 中触发

Question

我正在尝试扩展 jQuery UI dialog() 以使用箭头指针指向所单击的内容。我遇到的问题是知道碰撞方法何时运行，以便我可以将指针从左侧更改为右侧。

是否可以知道 position.collision 方法何时触发？

$('#myElem').dialog({
    position:{
        collision:'flip'
    }
});

解决方案：

事实证明，您可以通过的比文档中所说的要多。这是我最终使用的解决我的问题的方法：

position:
{
    my: 'left top',
    at: 'right center',
    of: $trigger,
    offset: '20 -55',
    collision: 'flip',
    using: function(obj) {

        var $modal = $(this),
            trigger_l = $trigger.position().left,
            modal_l = obj.left,
            top;

        // Check IE's top position
        top = ( isIE ) ? obj.top - 48 : top = obj.top;

        $(this).css({
            left: obj.left + 'px',
            top: top + 'px'
        });

    }
}

我使用position 对象内的using 方法完成了大部分工作。然后我快速检查了它是否是 IE，在文档前面已经完成，并相应地设置了我的 CSS。

我前段时间就这样做了，所以如果您遇到问题，请告诉我。 :)

Answer 1

不知道您的解决方案有何帮助，但这实际上接近真正的解决方案。我们需要使用相同的“使用”函数，它接收两个参数。第一个是定位对象的实际坐标，我们需要手动将此坐标设置为定位对象，就像您在解决方案中所做的那样。但是要确定翻转碰撞的方向，我们需要使用第二个参数。该参数提供有关两个元素的位置和尺寸的反馈，以及对它们相对位置的计算。你可以阅读这个here。

如果你有水平指向箭头，你需要根据当前的碰撞从左到右切换它的方向，你可以从第二个参数中获取“horizo​​ntal”属性的值给“using”函数。此属性的“left”值表示定位对象位于目标的右侧，反之亦然。因此，您可以根据当前碰撞更改定位元素上的类。这是一个例子：

position: 
{
    my: 'left top',
    at: 'right center',
    of: $trigger,
    offset: '20 -55',
    collision: 'flip',
    using: function(coords, feedback) {
            var $modal = $(this),
                top = ( isIE ) ? coords.top - 48 : coords.top,
                className = 'switch-' + feedback.horizontal;

            $modal.css({
                left: coords.left + 'px',
                top: top + 'px'
            }).removeClass(function (index, css) {
                   return (css.match (/\bswitch-\w+/g) || []).join(' ');
               }).addClass(className);

        }
    }

请注意，在上面的示例中，我们从 $modal 中删除了任何早期添加的“switch-”类。然后添加当前的'switch-'类。所以任何时候你将定位你的模态，它会根据当前的碰撞有'switch-left'或'switch-right'类。

Answer 2

请改用qTip。