0

エラー コンテナーを動的に作成し、本文に追加して、エラーが発生した要素に配置します。ユーザーがスクロールするまで、これはうまく機能します。エラー コンテナーは同じ固定位置にとどまり、要素はバックグラウンドで画面からスクロールします。スクロールイベント中にエラー要素を再配置して、スクロールするようにするにはどうすればよいですか?

エラーコンテナがどのように見えるかを示すスクリーンショット。ユーザーがスクロールするときにコンテナを再配置してスクロールし、目的の要素にとどまるようにする必要があります。現在、固定位置に留まっています。

エラーのスクリーンショットの例

さて、エラーがスクロールできる位置にあるとき。正しく表示されることに注目してください。

スクロール前のエラー

ページがスクロールされた後、エラーが元の要素にとどまらなくなったことに注意してください。スクロール中に要素の新しい位置でこの要素を正しく再配置する必要があります。

スクロール後。 今、間違った位置に

前もって感謝します！

コードなしで質問に答えるのが難しいことはわかっていますが、これは会社のものなので注意する必要があります。

ここでは、使用しているテンプレートの jsViews パッケージの一部として、「validation.js」ライブラリ内にコンテナーをビルドします。

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 インデックス: 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 に答える