Question

我正在尝试扩展jQuery UI对话框（）以使用箭头指针指向所点击的内容。我遇到的问题是知道碰撞方法何时运行，所以我可以改为从左侧到右侧的指针。

是否可以知道何时触发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'
        });

    }
}

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

我刚刚做过这个，所以如果你遇到问题请告诉我。：）

Answer 1

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

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

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。

知道jQuery UI中何时触发了位置冲突

2 个答案: