1

問題

新しいアイテムを追加できる注文フォームを作成しています。各アイテムの行は、数量、単価、説明、合計などで構成されます。新しいアイテムを追加するたびに、アクションをクリックすると、元の行の下に空白のフィールドのセットを含む新しい行が挿入されます。私が直面している問題は、ブラウザにスクロールバーがあり、アイテムが画面の下部にある場合です。新しいアイテムを追加すると、ビューの下に新しいアイテムが表示され、ユーザーはページを手動でスクロールする必要があります。

私が探しているもの。

私は、次のようなjqueryソリューションを探しています。

  • 1）ビュー内の前のアイテムの場所を検出します。
  • 2）新しいアイテムがajaxを介してページに挿入された後、ページをアニメーションでスクロールして、新しく作成されたアイテムを前のアイテムの正確な位置に戻します。

私が試したこと。

<div id="lineItemContainer">
    <div class="tapestry-forminjector">
        <div><input type="text" name="quantity"/></div>
        <div><input type="text" name="unit price"/></div>
        <div><input type="text" name="description"/></div>
        <div><input type="text" name="total"/></div>
    </div>
</div>
<div id="buttonContainer"><input type="submit" value="Add New Item"/></div>

//このイベントハンドラーは新しい行をリッスンし、新しい行が追加されると発生します。

$("#lineItemContainer div.tapestry-forminjector").live(Tapestry.AJAXFORMLOOP_ROW_ADDED, function(event){
    // This provides zero animation and currently does not work. 
    var y = $(window).scrollTop();
$(window).scrollTop(y+176);
}

最善 の解決策は、新しいアイテムが追加されたら前から最後のアイテムのyビュー座標を取得し、最後のアイテムが同じyビュー座標になるまでページをスクロールすることだと思います。このタスクを実行する方法がわかりません。

前もって感謝します。Tapestry.AJAXFORMLOOP_ROW_ADDEDイベントハンドラー

サイモンによって要求された更新、

$.widget("ui.tapestryFormInjector", {
        options : {
            show : "highlight"
        },

        _create : function() {
            this.element.addClass("tapestry-forminjector")
        },

        destroy : function() {
            this.element.removeClass("tapestry-forminjector");

            $.Widget.prototype.destroy.apply(this, arguments);
        },

        trigger : function() {
            var that = this, el = $("#" + this.options.element);

            var successHandler = function(data) {
                $(data).log("data");
                $.tapestry.utils.loadScriptsInReply(data, function() {
                    // Clone the FormInjector element (usually a div)
                    // to create the new element, that gets inserted
                    // before or after the FormInjector's element.

                    var newElement = el.clone(false);
                    newElement.attr("id", data.elementId);
                    newElement.html(data.content);

                    newElement = that.options.below ? el.after(newElement) : el
                            .before(newElement);

                    newElement.effect(that.options.show);

                    newElement.trigger(Tapestry.AJAXFORMLOOP_ROW_ADDED);
                });

            };

            $(this.options).log("this.options.url" + this.options.url)
            $.tapestry.utils.ajaxRequest({
                type : "POST",
                url : this.options.url,
                success : successHandler
            });
        }
    });
4

2 に答える 2

2

問題を正しく理解していれば.. コールバック関数で、アニメーションなしの純粋な JavaScript の方法が必要な場合 

 newElement.scrollIntoView(value) 
 // value = true, if you want to align with top else false

jQueryの方法が必要な場合

.offset()ドキュメントに対する要素の位置を計算します。要素のトップ値を取得し、スクロールバーをアニメーションでその特定の要素に移動します。一致した要素のスクロール バーの垂直位置を設定します。

 $("html, body").animate({ scrollTop: $('#newElement').offset().top }, 1500);

お役に立てれば。私が間違っている場合は、私を修正してください

于 2013-02-14T15:59:31.363 に答える