jQuery UI DatePicker проблема позиционирования при прокрутке веб-страницы - PullRequest
8 голосов
/ 14 мая 2010

У меня есть веб-страница, на которой используется несколько экземпляров указателя даты jQuery ui. На моей веб-странице будет отображено ~ 80 записей, что выходит за рамки одного снимка экрана.

<% foreach (var record in Model) { %>
    <div class="recordname"><%=record.name%></div>
    <%=Html.TextBox("DateTimePicker", null, new { @class = "date-pick" } )%>
    // <-- additional html here -->
<% } %> 

Я установил значения по умолчанию для моего средства выбора даты следующим образом:

    $(".date-pick").each(function() {
    $(this).datepicker({
        dateFormat: 'dd M yy',
        showOn: 'button',
        buttonImage: '/Images/datepickericon.png',
        buttonImageOnly: true
        });
    });

При первой загрузке страницы, если я щелкаю по любому значку DatePicker, который виден на экране (, т.е. без прокрутки ), тогда DatePicker появляется, как и ожидалось.

Однако, если прокрутить страницу вниз и щелкнуть значок средства выбора даты, средство выбора даты не появится в окне экрана, а вместо этого отобразится прямо в верхней части экрана.

Есть идеи, как это решить?

Я использую:

  • IE7
  • asp.net mvc
  • jquery.ui.datepicker.js (UI / API / 1.8 / Datepicker)

Ответы [ 10 ]

9 голосов
/ 13 ноября 2012

У меня тоже была такая же проблема, я использую IE9, но вместо этого использую document.documentElement.scrollTop Я редактирую следующую строку в моем коде JS

$.datepicker._pos[1] += input.offsetHeight + document.body.scrollTop;

Это потому, что document.documentElement.scrollTop возвращает 0, для меня приведенный выше код решает мою проблему

7 голосов
/ 21 мая 2010

Я думаю, что мне удалось решить мою проблему, но в то же время, я думаю, что я, возможно, обнаружил ошибку (?) В коде даты jquery ui

Прежде чем идти дальше, позвольте мне сказать, что я новичок в jquery / javascript и буду признателен за любую информацию, представленную ниже.

Чтобы напомнить о проблеме, я использую asp.net mvc и пытаюсь показать ~ 80 сборщиков данных на странице. Для любого средства выбора даты в начальном окне просмотра указатели даты располагаются нормально. Однако, когда я прокручиваю вниз, средства выбора даты по-прежнему отображаются в верхней части экрана.

Я начал просматривать исходный код и делать некоторую отладку. Я заметил, что степень смещения указателя даты в верхнюю часть экрана была прямо пропорциональна величине, на которую я прокручивал, т.е. больше прокрутки = большее смещение.

Ключевая проблема в коде, который я обнаружил (см. Ниже), заключается в том, что когда код работает, где разместить указатель даты, он не учитывает, как далеко вниз прокручивается экран пользователя:

_showDatepicker: 
function(input) { 
      input = input.target || input;
      //....more code...

      if (!$.datepicker._pos) { // position below input
      $.datepicker._pos = $.datepicker._findPos(input);
      $.datepicker._pos[1] += input.offsetHeight; //add the height
       }

В последней строке метод offsetHeight не учитывает, насколько вы прокрутили экран вниз.

Если вы обновите эту строку до следующей, это решит проблему, которую я поднял:

  $.datepicker._pos[1] += input.offsetHeight + document.documentElement.scrollTop; //add the height 

Это просто получает позицию полосы прокрутки и добавляет ее к offsetHeight, чтобы получить правильную позицию.

В интересах полного раскрытия информации я не совсем уверен, почему это работает, и был бы признателен за некоторое понимание.

Я потратил ~ 3 дня на эту проблему и исследовал сеть, и это лучшее, что я могу придумать.

Интересно, что на форумах jquery был похожий запрос:

Нажмите здесь, чтобы посмотреть

Читая отчет, можно предположить, что в предыдущей версии до 1.8 была исправлена ​​ошибка?

Спасибо

3 голосов
/ 04 декабря 2012

Я столкнулся с такой же проблемой с jQuery UI версии 1.9.2 и IE9.

Кажется, что в jQuery UI есть функция под названием _checkOffset, предназначенная для решения этой проблемы. Это не работает.

Он пытается использовать $(document).scrollTop(), который, кажется, всегда возвращает 0 в IE9. Мне пришлось изменить содержимое функции, чтобы использовать document.body.scrollTop вместо этого, когда функция jQuery возвращает ноль. Таким образом заменить

$(document).scrollTop()

с

($(document).scrollTop()||document.body.scrollTop)

везде в _checkOffset, чтобы «исправить» пользовательский интерфейс jQuery и заставить его работать должным образом.

3 голосов
/ 12 октября 2012

У меня тоже были эти проблемы в IE 9, и я не могу отблагодарить вас за вашу коллективную помощь. Chrome 22.0.1229.94 m и FF 15.0.1 не показали эту проблему для меня.

Сначала я попытался принудительно эмулировать IE 8 с помощью метатега

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> 

безрезультатно.

Затем я отредактировал файл jquery.ui.datepicker.js , предложив откорректировать высоту позиции с учетом прокрутки. Это тоже не сработало.

Наконец я изменил свой тип документа с

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

до

<!DOCTYPE html>

успешно сработало !!

Я удалил метатег, который вызвал эмуляцию IE 8, но сохранил сделанные мной изменения в файле datepicker js. Мой успех мог быть комбинацией отредактированного js и изменения в doctype, или просто изменения в doctype.

2 голосов
/ 11 июля 2014

В Jquery.UI просто обновите функцию _checkOffset, чтобы viewHeight добавлялся в offset.top, прежде чем будет возвращено смещение. Сценарий: datepicker.js

_checkOffset: function(inst, offset, isFixed) {
     var dpWidth = inst.dpDiv.outerWidth();
     var dpHeight = inst.dpDiv.outerHeight();
     var inputWidth = inst.input ? inst.input.outerWidth() : 0;
     var inputHeight = inst.input ? inst.input.outerHeight() : 0;
     var viewWidth = document.documentElement.clientWidth + (isFixed ? 0 : $(document).scrollLeft());
     var viewHeight = document.documentElement.clientHeight + (isFixed ? 0 : ($(document).scrollTop()||document.body.scrollTop));

     offset.left -= (this._get(inst, "isRTL") ? (dpWidth - inputWidth) : 0);
     offset.left -= (isFixed && offset.left === inst.input.offset().left) ? $(document).scrollLeft() : 0;
     offset.top -= (isFixed && offset.top === (inst.input.offset().top + inputHeight)) ? ($(document).scrollTop()||document.body.scrollTop) : 0;

     // now check if datepicker is showing outside window viewport - move to a better place if so.
     offset.left -= Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
                Math.abs(offset.left + dpWidth - viewWidth) : 0);
     offset.top -= Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
                Math.abs(dpHeight + inputHeight) : 0);
     offset.top = offset.top + viewHeight;

     return offset;
},
1 голос
/ 04 июня 2013

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

$(".ui-datepicker-trigger").on("click", function() {
var self;
if ($.browser.msie) {
self = $(this);
$("#ui-datepicker-div").hide();
setTimeout(function(){
$("#ui-datepicker-div").css({
top: self.offset().top + $('html').scrollTop() + 30
});
$("#ui-datepicker-div").show();
}, 0); 
}
}); 

Дайте попробовать, у меня это сработало:)

1 голос
/ 21 июня 2011

Я столкнулся с той же проблемой в приложении, над которым я работаю, и нашел решение. Приложение не содержало надлежащей спецификации типа документа, и все, что было нужно, это добавить ее в начало страницы.

<!DOCTYPE html>

Надеюсь, это поможет.

1 голос
/ 14 мая 2010

Я не уверен, что это будет проблемой, но вы прикрепляете средство выбора даты нестандартным способом. Вам не нужно повторять с .each ();

$("input.date-pick").datepicker({
    dateFormat: 'dd M yy',
    showOn: 'button',
    buttonImage: '/Images/datepickericon.png',
    buttonImageOnly: true
});

Кроме того, вы всегда должны по возможности помещать имя тега перед селектором класса, поскольку это ускоряет процесс выбора.

0 голосов
/ 08 мая 2015

сначала зайдите сюда и отформатируйте свой js-файл в Javascript Beautifier

затем перейдите к строке № 445

k = k + document.body.scrollTop;
change this line as 
k = k ;
0 голосов
/ 01 сентября 2011

Всплывающее окно Datepicker-UI можно сделать перетаскиваемым, добавив следующий код:

$ ( '# щ-DatePicker-ДИВ') перетаскиваемым ();.

Поскольку этот идентификатор применяется к компоненту div, созданному для всех всплывающих подсказок даты на странице. В то время как:

$ ( "щ-DatePicker"). Перетаскиваемым ()

Применяется ко всем средствам выбора даты на странице (всплывающих или встроенных). Делая панель перетаскиваемой, вы обычно можете расположить указатель даты в нужном вам месте без прокрутки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...