Question

我有一个页面，其中包含一些自定义验证，可在验证摘要中显示结果。我想将此验证摘要重新定位到页面的底部，而不会导致页面滚动验证摘要的长度。我有一个非常好的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)

这个有效!!感谢您的学习经历，我不知道我可以从我的代码背后调用它！我将来会做更多这样的事情！

Answer 1

如果我理解正确你想重新定位一个包含验证摘要的元素，那么AFAIK jQuery不会提供任何事件来检测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()，但这是一个过度的解决方案。

Answer 2

试试这个：

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

始终应用此样式，而不是仅在验证摘要显示时应用。它应该将您的div修复到页面底部。

当DOM可见时执行jQuery函数

2 个答案: