jQuery DatePicker在滾動div時不會隨HTML內容一起移動

我使用限制大小的窗體並將滾動樣式設置爲滾動。此表單包含許多DatePickers。如果我打開DatePicker中的一個，然後滾動面板（使滾輪保持對DatePicker的焦點，使其保持打開狀態），DatePicker不會隨其附加的表單域一起移動。見我下面工作的完整示例：jQuery DatePicker在滾動div時不會隨HTML內容一起移動

<html> 
    <head> 
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script> 
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script> 
    </head> 
    <body> 
    <div style="width: 200px; height: 200px; overflow: scroll"> 
<script type="text/javascript"> 
    $(function() { 
    $('#datepicker').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     showOn: 'button', 
     changeMonth: true, 
     changeYear: true, 
     buttonImageOnly: true, 
     dateFormat: 'dd M yy', 
     buttonText: 'Click' 
    }); 
    }); 
</script> 
     <div class="demo"> 
     <p>Date: 
      <input type="text" id="datepicker"> 
     </p> 
     </div> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
    </div> 
    </body> 
</html>

目前的日期選擇器固定在相對於瀏覽器窗口不會觸發輸入字段的地方。任何人都可以幫助我保持DatePicker控件在窗體滾動時相對於其觸發器輸入字段處於打開狀態並保持在相同位置？

謝謝

編輯：澄清標題和情況說明。

編輯：固定的摘要文本

來源

2009-12-07 Keith K

使用的完整的解決方案是：

var dtPckr = $('#datepicker') 

$(".demo").scroll(function() { 
    dtPckr.datepicker('hide'); 
}); 

$(window).resize(function() { 
    dtPckr.datepicker('hide'); 
});

這通過添加窗口調整大小處理程序來隱藏日期選擇器，擴展由Nick C發佈的解決方案。這應該涵蓋所有的情況，當內容將相對於顯示的日期選擇器移動時。

來源

2010-01-28 17:11:56

該日期選擇器被連接到一個容器中，在所有情況下，主體元素作爲1.7.2插件的。不幸的是，這意味着不，在滾動div中它不是一個可解決的問題。 This came up on the jQuery groups mailing list a while back.

另一種方法是，當你滾動div來關閉日期選擇器，以便有至少沒有視覺假象事情：

$(".demo").scroll(function() { 
    $('#datepicker').datepicker('hide'); 
});

來源

2010-01-14 03:12:27

jQuery DatePicker在滾動div時不會隨HTML內容一起移動

回答

相關問題