jQuery UI DatePicker проблема позиционирования при прокрутке веб-страницы
У меня есть веб-страница, которая использует несколько экземпляров jQuery ui datepicker. На моей веб-странице будет отображено ~ 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)
2 ответа
Я думаю, что мне удалось решить свою проблему, но в то же время я думаю, что, возможно, обнаружил ошибку (?) В коде jquery ui datepicker.
Прежде чем я продолжу, позвольте мне сказать, что я новичок в jquery / javascript и буду признателен за любые комментарии ниже.
Чтобы повторить проблему, я использую asp.net mvc и пытаюсь показать ~ 80 датпикеров на странице. Для любого datepicker в начальном окне просмотра положение datepickers нормально. Однако, когда я прокручиваю вниз, датпикеры по-прежнему отображаются в верхней части экрана.
Я начал просматривать исходный код и заниматься отладкой. Я заметил, что степень смещения datepicker к верхней части экрана была прямо пропорциональна количеству, на которое я прокрутил, то есть больше прокрутки = большее смещение.
Ключевая проблема в коде, который я обнаружил (см. Ниже), заключается в том, что когда код определяет, где разместить указатель даты, он не принимает во внимание, насколько далеко вниз по экрану прокрутил пользователь:
_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?
Спасибо
Не уверен, что это проблема, но вы прикрепляете датпикер нестандартным способом. Вам не нужно выполнять итерацию с помощью .each ();
$("input.date-pick").datepicker({
dateFormat: 'dd M yy',
showOn: 'button',
buttonImage: '/Images/datepickericon.png',
buttonImageOnly: true
});
Кроме того, вы всегда должны всегда помещать имя тега перед селектором класса, когда это возможно, поскольку это ускоряет процесс выбора.