Выполнить функцию jQuery, когда DOM виден - PullRequest
Новая
       12

Выполнить функцию jQuery, когда DOM виден

2 голосов
/ 17 декабря 2010

У меня есть страница с некоторой пользовательской проверкой, которая отображает результат в сводке проверки.Я хотел бы переместить эту сводку проверки в нижнюю часть страницы, не заставляя страницу прокручиваться с длиной сводки проверки.У меня есть функция 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)

Это работает !!Спасибо за опыт обучения, я понятия не имел, что я могу назвать это из моего кода!Я буду делать это намного больше в будущем!

Ответы [ 2 ]

2 голосов
/ 17 декабря 2010

Если я правильно понял, что вы хотите изменить положение элемента, который содержит вашу сводку проверки, когда он появляется, то 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(), но это решение с избыточным количеством.

0 голосов
/ 17 декабря 2010

Попробуйте это: 

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

Применяйте этот стиль постоянно, а не только когда отображается сводка проверки. Это должно исправить ваш div в нижней части страницы.

...