jQuery BeautyTips собирает пузырьки вместе, когда ссылки на элементы отсутствуют в окне просмотра - PullRequest
Новая
       20

jQuery BeautyTips собирает пузырьки вместе, когда ссылки на элементы отсутствуют в окне просмотра

1 голос
/ 30 августа 2011

Мы используем BeautyTips как механизм для создания различных видов пузырей для общения с пользователем. Например, у нас есть значок справки, который показывает всплывающее окно с дополнительной информацией. Мы также используем BT для отображения сообщений об ошибках и предупреждений.

Вот как это выглядит на практике.

The bulk of the error messages are stacked on top of one another.

Вы можете видеть, что сообщения об ошибках накладываются друг на друга и вянут их родительское сообщение.

В form_validator у меня есть функция для аргумента errorPlacement: 

    errorPlacement: function (er, el) {
        if (el && el.length > 0) {
            if (el.attr('id') == 'ContractOpenEnded') {
                createErrorBubble($('#contractDuration'), er.text())
            }
            else {
                createErrorBubble($(el), er.text());
            }
        }
    }

Вот функции, которые делают тяжелую работу для создания этих пузырей. 

function createErrorBubble(element, text) {    
    // In a conversation with pcobar the spec was changed for the bubbles to be to the right of the element
    createBubble(element, text, 2, "none", "right", "#fe0000", "#b2cedc", "#ffffff", true);
    element.btOn();
}

Здесь функция createBubble. 

function createBubble(element, content, messageType, trigger, positions, fillColor, strokeColor, foreColor, useShadow) {
    var btInstance = element.bt(
        content,
        {
            trigger: trigger,
            positions: positions,
            shrinkToFit: true,
            spikeLength: 12,
            showTip: function (box) {
                $(box).fadeIn(100);
            },
            hideTip: function (box, callback) {
                $(box).animate({ opacity: 0 }, 100, callback);
            },
            fill: fillColor,
            strokeStyle: strokeColor,
            shadow: useShadow,
            clickAnywhereToClose: false,
            closeWhenOthersOpen: false, // Closing when others open hides page validation errors. This should be false.
            preShow: function (box) {
                if (messageType != 1) return;

                var whiteboard = $($(box).children()[0]);
                var content = whiteboard.html();

                if (content.substr(0, 5).toLowerCase() == "<div>") {
                    content = content.substr(5, content.length -11);
                }

                whiteboard.html('<div><span class="helpWarningPrefix">Warning:</span> ' + content + "</div>");
            },
            cssStyles: { color: foreColor },
            textzIndex: 3602, // z-index for the text
            boxzIndex: 3601, // z-index for the "talk" box (should always be less than textzIndex)
            wrapperzIndex: 3600
        });
}

Ответ на этот вопрос проясняет меня.

Обновление:

На самом деле похоже, что это может быть скорее попытка создать пузырь для чего-то, чего нет в видимой области страницы.

Редактировать: Обновлен заголовок, чтобы более четко отражать название проблемы.

1 Ответ

0 голосов
/ 01 сентября 2011

С реализацией из обновления, сделанного ранее (проблема, лежащая в элементах за пределами экрана), я придумал хак, который «исправляет» проблему, но не элегантен и далеко не лучший, так как мой кот попал в блеск ремесла. и понятия не имел, что случилось.

Вот хак: 

errorPlacement: function (er, el) {
    if (el && el.length > 0) {
        if (el.attr('id') == 'ContractOpenEnded') {
            $('#contractDuration').focus();
            createErrorBubble($('#contractDuration'), er.text())
        }
        else {
            $(el).focus();
            createErrorBubble($(el), er.text());
        }
    }
},

Волшебство здесь - это вызовы .focus (), чтобы вернуть элементы обратно в порт просмотра.

...