0

我们动态创建一个错误容器，将其附加到正文中，然后将其定位到错误所在的元素处。这很好用，直到用户滚动。错误容器保持在相同的固定位置，而元素在后台滚动出屏幕。如何在滚动事件期间重新定位错误元素以使其也滚动？

屏幕截图显示了我们的错误容器的样子。需要在用户滚动时重新定位和滚动容器，以便它与它所针对的元素保持一致。目前，它保持在一个固定的位置。

错误的示例屏幕截图

现在，当错误处于可以滚动的位置时。注意它是如何正确显示的。

滚动前的错误

现在请注意，在页面滚动后，错误不再停留在它所针对的元素中。我需要在滚动时使用元素的新位置正确重新定位此元素。

滚动后。 现在位置不对

提前致谢！

我知道没有代码很难回答问题，但我必须小心，因为这是公司的事情。

这是我在“validation.js”库中构建容器的地方，作为我们正在使用的模板的 jsViews 包的一部分。

buildContainer: function(ev)
        {
            var $targetElem = $(ev.target),
                leftX = $targetElem.offset().left,
                topY = $targetElem.offset().top,
                widthY = $targetElem.outerWidth(),
                heightX = $targetElem.outerHeight();

            var msg = $targetElem.closest("label").val();
            var appendingContainer = null;

            $targetElem.closest("label").val('');

            return $('<div/>', {
                html: '<ul>' + this.isValid + '</ul><span></span>',
                'class': 'validation-tooltip-error',
                css: {
                    top: topY - heightX,
                    left: leftX + widthY - 20
                }
            }).appendTo("body");
        }

这是错误容器的 CSS：

.validation-tooltip-error { 位置：绝对；宽度：自动；z-index：9999999999；}

.validation-tooltip-error ul
{
    padding: 0;
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    color: #eeeeee;
    background: #a9502a;
    padding: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    list-style: none;
    line-height: 16px;
    -moz-box-shadow: 0 -2px 4px #666666;
    -webkitbox-shadow: 0 -2px 4px #666666;
    box-shadow: 0 -2px 4px #666666;
}

.validation-tooltip-error span
{
   display: block;
   width: 0;
   height: 0;
   border-left: 0 solid transparent;
   border-right: 15px solid transparent;
   border-top: 10px solid #a9502a;
   border-top: 10px solid #a9502a;
   border-bottom: 0;
   margin-left: 10px;
}

希望这会有所帮助。

4

1 回答 1

1

也许您可以将错误附加到它指向的输入/标签附近？我通常有这样的东西

<div class = "input-row">
    <label>Label</label>
    <input type = "text" />
    <span class = "error">Error</span>
</div>

然后我可以将错误标签设置为绝对位置，将输入行设置为相对位置。

于 2013-10-30T17:01:15.173 回答