当DOM可见时执行jQuery函数

我有一个页面，其中包含一些自定义验证，它在验证摘要中显示结果。我希望将此验证摘要重新定位到页面的底部，而不会导致页面随验证摘要的长度一起滚动。我有一个很好的jQuery函数，但是，我需要在显示验证摘要后执行这个jQuery，并且我不确定要触发哪个事件。当DOM可见时执行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)

这个作品！感谢学习经验，我不知道我可以从我的代码后面调用这个！我将来会做得更多！

来源

2010-12-17 Tgibson

你能解释多一点你想做什么，我没有完全理解你的意思是什么时候'DOM可见' – JOBG 2010-12-17 18:31:31

验证信息并不总是可见的。它只有在验证失败时才可见。当消息可见时，我需要应用这些样式。 – Tgibson 2010-12-17 18:40:16

如果我明白你想重新定位一个包含你的验证总结出现的元素，那么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()，但它是一个矫枉过正的解决方案。

来源

2010-12-17 18:55:30 JOBG

我可以在哪里调用？从.aspx页面背后的代码？ – Tgibson 2010-12-17 20:26:38

你可以发布一些实际的html代码，什么时候你想改变'vsmSummary'的CSS。因为如果你正在做一个完整的帖子来在服务器端进行验证，那么为什么不在服务器上设置该CSS。 – JOBG 2010-12-17 20:37:34

我这样解决了它 – Tgibson 2010-12-17 21:33:06

试试这个：

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

有这种风格应用了所有的时间，而不是仅在验证摘要节目。它应该修复你的div到页面底部。

来源

2010-12-17 19:00:46

这扩展了页面（创建了一个滚动效果） – Tgibson 2010-12-17 20:27:56

当DOM可见时执行jQuery函数

回答

相关问题