2

検証の概要に結果を表示するカスタム検証のページがあります。検証サマリーの長さでページをスクロールさせずに、この検証サマリーをページの下部に再配置したいと思います。これを非常にうまく行うjQuery関数がありますが、検証の概要が表示された後にこのjQueryを実行する必要があり、どのイベントをトリガーするかわかりません。

$(document).ready(function(){
$("#<%= vsmSummary.ClientID %>").change(function(){
    var newTop =   $(window).height() - $("#vsmSummary").height();
    var newLeft = ($(window).width()  - $("#vsmSummary").width()) / 2;

        $("#vsmSummary").css(
            {
                'position': 'absolute',
                'left': newLeft,
                'top': newTop
            }
        );
    });
});

カスタム検証メソッドでは、この文字列を作成し、RadScriptManagerに登録します...

Dim scriptText As String = "$(document).ready(function(){ " + _
                            "$(""#<%= vsmSummary.ClientID %>"").ready(function(){" + _
                                "var newTop =   $(window).height() - $(""#vsmSummary"").height();" + _
                                "var newLeft = ($(window).width()  - $(""#vsmSummary"").width()) / 2;" + _
                                    "$(""#vsmSummary"").css(" + _
                                     "{" + _
                                            "'position': 'absolute'," + _
                                            "'left': newLeft," + _
                                            "'top': newTop" + _
                                     "}" + _
                                    ");" + _
                                "});" + _
                            "});"


RadScriptManager.RegisterClientScriptBlock(Me.upSCPPage, Me.upSCPPage.GetType(), "DynamicVSM", scriptText, True)

これで動作します!! 学習経験のおかげで、コードビハインドからこれを呼び出すことができるという手がかりがありませんでした!! 私はこれを将来もっともっとやっていきます！

4

2 に答える 2

2

検証サマリーが表示されたときにそれを保持する要素を再配置したいというのが正しいと理解している場合、AFAIKjQueryはinnerHtmlの変更を検出するイベントを提供しません。

私の提案は、それを関数に移動し、検証コード内からオンデマンドで呼び出すことです。

//in your validation code
$("#vsmSummary").html('Your Validation Message Here');
Reposition();

//in a separate function
function Reposition()
{
var newTop =   $(window).height() - $("#vsmSummary").height();
    var newLeft = ($(window).width()  - $("#vsmSummary").width()) / 2;

        $("#vsmSummary").css(
            {
                'position': 'absolute',
                'left': newLeft,
                'top': newTop
            }
        );
}

よりクリーンにしたい場合は、jQuery関数として作成することもできます。

jQuery.fn.reposition = function () {
var newTop =   $(window).height() - $(this).height();
var newLeft = ($(window).width()  - $(this).width()) / 2;

            $(this).css(
                {
                    'position': 'absolute',
                    'left': newLeft,
                    'top': newTop
                }
            );
}

そしてそれをこのように呼びます：

$("#vsmSummary").html('Your Validation Message Here').reposition();

注：innerHTML.lengthと setInterval()で確認できますが、それはやり過ぎの解決策です。

于 2010-12-17T18:55:30.587 に答える
0

これを試して：

#vsmSummary {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 25px;
}

検証の概要が表示されている場合だけでなく、常にこのスタイルを適用してください。divをページの下部に修正する必要があります。

于 2010-12-17T19:00:46.147 に答える