jquery datepicker 在ie7中有滚动条时错位问题

3 篇文章 0 订阅

问题简述( IE 7 Document Mode中才会有此情况):

正常情况,滚动条未滚动,datepicker框显示正常,位于控件图标下面



错误情况,滚动条下拉,datepicker框显示错位




修正代码:
 $(".datepickerInput").datepicker({
	        showOn: "button",
	        buttonImage: "<c:url value="/images/calendarIcon.gif"/>",
	        buttonImageOnly: true,
	        changeMonth: true,
	        changeYear: true,
	        yearRange : "c-20:+0",
	        beforeShow: function (input, inst) {
                $.datepicker._pos = $.datepicker._findPos(input); 
                $.datepicker._pos[1] += input.offsetHeight + document.body.scrollTop; // 加入body的scrollTop修正jquery在ie7中定位不準的問題
                inst.dpDiv.css('font-size' ,'70%'); 
            }
	    });



参考

I think I have managed my issue but at the same time I think I may have uncovered a bug in the jquery ui datepicker code. Also, I couldn't post code on JSBin as I couldn't figure out how to show a datepicker.
 
Before I go further then let me just say that I am new to jquery / javascript and would appreciate your input on the below. I am hoping you are much more experienced in jquery coding than I am.
 
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 these forums ( http://dev.jqueryui.com/ticket/3863 ). Reading the report it seemed to suggest that the bug was fixed in a prior version to 1.8?
 
Thanks

參考:http://forum.jquery.com/topic/jquery-ui-datepicker-positioning-problem-when-scrolling-down-webpage-in-ie7
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值