Знать, когда произошло столкновение позиции в jQuery UI

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», которая получает два аргумента.Первый - это действительные координаты позиционируемого объекта, и нам нужно будет вручную установить эти координаты для позиционируемого объекта, как вы делали это в своем решении.Но чтобы определить направление переворота, нам нужно использовать второй аргумент.Этот аргумент обеспечивает обратную связь о положении и размерах обоих элементов, а также вычисления их относительного положения.Вы можете прочитать об этом здесь .

Если у вас есть горизонтальная стрелка, и вам нужно переключить ее направление слева направо и наоборот в соответствии с текущим столкновением, вы можете получить значение свойства «Horizontal» из второго аргумента в «using"функция.«Левое» значение этого свойства означает, что позиционируемый объект располагается справа от цели, и наоборот.Таким образом, вы можете изменить классы позиционируемого элемента в соответствии с текущим столкновением.Вот пример:

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 вместо.