jQuery ui datepicker定位问题当滚动网页时 [英] jQuery ui datepicker positioning problem when scrolling down webpage

问题描述

我有一个使用jQuery ui datepicker的多个实例的网页。

 <％foreach（Model中的var record）{％ > 
< div class =recordname><％= record.name％>< / div> 
<％= Html.TextBox（DateTimePicker，null，new {@class =date-pick}）％> 
 //<  -  additional html here  - > 
<％}％> 
  

我已经设置了我的datepicker的默认值，如下所示：

$ b每个（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）

解决方案

我想我已经设法解决了我的问题，但同时我认为我可能已经发现了一个错误（？）在jquery ui datepicker代码。

在我进一步之前，让我只是说我是新的jquery / javascript，并希望下面的任何输入。

要回顾一下问题，我正在使用asp.net mvc，我试图在页面上显示〜80个日期提示。对于初始视口中的任何日期戳，日期检查者的位置不错。但是，当我向下滚动时，日期检查器仍然呈现在屏幕顶部附近。

我开始查看源代码并进行一些调试。我注意到，datepicker在屏幕顶部偏移的程度与我滚动的数量成正比，即更多的scroll =更大的偏移量。

我发现的代码中的关键问题（见下文）是，当代码解决了定位datepicker的位置时，它不考虑用户滚动的屏幕多远：

  _showDatepicker：
 function（input）{
 input = input.target ||输入
 //....more code ... 
 
 if（！$。datepicker._pos）{// position under input 
 $ .datepicker._pos = $。 datepicker._findPos（input）; 
 $ .datepicker._pos [1] + = input.offsetHeight; //添加高度
} 
  

在最后一行，offsetHeight方法没有考虑您有多少滚动到屏幕上。

如果您将此行更新为以下内容，则可以解决我提出的问题：

  $ .datepicker._pos [1] + = input.offsetHeight + document.documentElement.scrollTop; //添加高度
  

这只是获取滚动条的位置，并将其添加到offsetHeight以获取正确的位置。

为了充分披露，我不太清楚为什么这样做，并希望有一些见解。

我在这个问题上花费了大约3天时间研究了网络，这是我能想到的最好的。

有趣的是，在jquery论坛中有一个类似的查询：

点击此处查看

阅读报告似乎表明该错误在以前的版本中修复为1.8？ / p>

谢谢

I have a webpage that uses multiple instances of the jQuery ui datepicker. My webpage will display ~80 records which extends beyond a single screenshot.

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

I have set the defaults of my datepicker as follows:

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

When the page first loads, if I click any datepicker icon that is visible on screen (i.e. without scrolling) then the datepicker appears as expected.

However, if I scroll down the page and then click a datepicker icon, the datepicker does not appear in the screen window but is instead rendered right back near the top of the screen.

Any ideas how to solve this?

I am using:

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

解决方案

I think I have managed to resolve my issue but at the same time I think I may have uncovered a bug (?) in the jquery ui datepicker code.

Before I go further then let me just say that I am new to jquery / javascript and would appreciate any input on the below.

To recap the problem, I am using asp.net mvc and I am trying to show ~80 datepickers on a page. For any datepicker in the initial viewport, the datepickers position fine. However, when I scroll down the datepickers are still rendered near the top of the screen.

I started to view the source code and do some debugging. What I noticed is that the extent to which the datepicker was offset towards the top of the screen was directly proportional to the amount by which I had scrolled i.e. more scroll = greater offset.

The key issue in the code I found (see below) is that when the code works out where to position the datepicker it does not take into account how far down the screen a user has scrolled:

_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
       }

In the final line the offsetHeight method does not take account of how much you have scrolled down the screen by.

If you update this line to the following then this solves the issue I have raised:

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

This simply gets the scrollbar position and adds it to offsetHeight to get the correct position.

In the interests of full disclosure I am not exactly sure why this works and would appreciate some insight.

I have spent ~ 3 days on this issue and researched the web and this is the best I can come up with.

Interestingly, there was a similar query in the jquery forums:

Click here to view

Reading the report it seemed to suggest that the bug was fixed in a prior version to 1.8?

Thanks

这篇关于jQuery ui datepicker定位问题当滚动网页时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！