Знайте, когда столкновение позиций запущено в пользовательском интерфейсе jQuery

Я пытаюсь расширить диалог 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 top position
        top = ( isIE ) ? obj.top - 48 : top = obj.top;

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

    }
}

Я использовал метод using внутри объекта position, чтобы выполнить большую часть работы. Затем я сделал быструю проверку, чтобы увидеть, был ли он IE, сделанный ранее в документе, и соответственно установите мой CSS.

Я сделал это некоторое время назад, поэтому дайте мне знать, если у вас возникнут проблемы.:)

Ответы

Ответ 1

Не знаю, как могло бы помочь ваше решение, но это действительно близко к реальному решению. Нам нужно использовать ту же функцию "using", которая получает два аргумента. Первый - это фактические координаты позиционируемого объекта, и нам нужно будет вручную установить эти координаты на позиционный объект, как это было в вашем решении. Но для определения направления флип-столкновения нам нужно использовать второй аргумент. Этот аргумент обеспечивает обратную связь о позиции и размерах обоих элементов, а также вычисления их относительного положения. Вы можете прочитать об этом здесь.

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

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);

        }
    }

Обратите внимание, что в приведенном выше примере мы удалили из модального класса любые добавленные классы "switch-". Затем добавлен текущий класс "switch-". Поэтому в любое время, когда вы станете вашим модальным, у него будет класс "switch-left" или "switch-right" в зависимости от текущего столкновения.

Ответ 2

Используйте qTip вместо этого.