jquery - 我将使用什么 jquery 代码或插件来更新元素的位置？

Question

我正在使用来自 [FilamentGroup] 的一个名为 DateRangePicker 的 jquery 插件。

我有一个简单的表单，其中有两个文本输入用于我将 DateRangePicker 绑定(bind)到使用它的开始日期和结束日期

$('input.tbDate').daterangepicker({
            dateFormat: 'mm/dd/yy',  
            earliestDate: new Date(minDate),  
            latestDate: new Date(maxDate),  
            datepickerOptions: {  
                changeMonth: true,  
                changeYear: true,  
                minDate: new Date(minDate),  
                maxDate: new Date(maxDate)  
            }  
        }); 

我在这个表单上方有一个可折叠的表格，当它显示时，将表单和 daterangepicker 插件绑定(bind)到的元素移动到页面的下方，但 daterangepicker 似乎保留了它实际创建时的位置。

我可以在 daterangepicker 的 onShow 回调中放入什么代码来更新它的位置，使其位于最初绑定(bind)的元素旁边？或者是否有一些特定的 jquery 方法或插件可以链接到 daterangepicker 插件，以便它正确更新其位置。这对于我使用的其他一些插件来说会派上用场，这些插件似乎也没有正确地保持它们相对于其他元素的位置。

Answer 1

尝试 jQuery UI position :

Utility script for absolutely positioning any widget relative to the window, document, a particular element, or the cursor/mouse.

示例

$('input.tbDate').daterangepicker({
    dateFormat: 'mm/dd/yy',
    datepickerOptions: {
        changeMonth: true,
        changeYear: true
    },
    onOpen: function () {
        $('.ui-daterangepickercontain').position({
            my: "left top",
            at: "left bottom",
            of: $('input.tbDate')
        });
    }
});

...实际上，如果您设置通过ID而不是类选择输入，您只需要调用position方法一次:

$('#two').daterangepicker({
    dateFormat: 'mm/dd/yy',
    datepickerOptions: {
        changeMonth: true,
        changeYear: true
    }
});
$('.ui-daterangepickercontain').position({
    my: "left top",
    at: "left bottom",
    of: $('#two')
});