我會用什麼jQuery代碼或插件來更新元素的位置？

我正在使用名爲DateRangePicker的[FilamentGroup]中的jquery插件。我會用什麼jQuery代碼或插件來更新元素的位置？

我有一個簡單的形式與用於開始和結束日期，我結合DateRangePicker使用此

$('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插件綁定到的元素在頁面中較低，但daterangepicker似乎保留了實際創建時的位置。

我可以在daterangepicker的onShow回調中將哪些代碼更新到元素旁邊的位置是最初綁定的？或者是有一些特定的jQuery方法或插件，我可以鏈接到daterangepicker插件，以便它將正確更新其位置。這對於我使用的一些其他插件來說非常方便，它們似乎並沒有正確地保持它們相對於其他元素的位置。

來源

2010-04-03 Breadtruck

您是否使用這個日期範圍選取器：http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/在jQuery 1.7上運行？ – dochoffiday 2010-04-13 21:00:04

@Doc：是的，我是！ – Breadtruck 2010-04-15 17:07:32

我之前使用過，並通過使用jQuery UI的位置補救了這個問題......我用一個例子更新了我的答案。 – dochoffiday 2010-04-15 19:32:47

嘗試jQuery UI position：

實用程序腳本絕對定位相對任何插件到窗口，文件，特定元件，或光標/小鼠。

例

$('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，而不是類的選擇輸入，你只需要調用位置的方法，一次：

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

來源

2010-04-13 20:57:20 dochoffiday

我認爲你不需要插件或將回調傳遞給onShow daterangepicker處理函數。

您只需要在顯示錶格的同時更新daterangepicker位置。像這樣：

jQuery(document).ready(function(){ 
    // setup daterangepicker 
    $('input.tbDate').daterangepicker({ 
     // ... 
    }); 
    // query dom once and store for performance 
    var dateranges = $('.ui-daterangepickercontain'); 
    // remember daterangepicker original top 
    var daterangeoriginaltop = dateranges.offset.top; 
    // setup collapsable table 
    $('#openCloseButton').click(function(e){ 
     $('#myTable').slideToggle('slow', function(){ 
      daterangepicker.css({ 
       'top': daterangeoriginaltop + $('#myTable').outerHeight(); 
      }); 
     }); 
    }); 
});

此代碼應爲每頁只有一個daterangepicker工作（因爲.offset只查詢在收集第一個元素）。

來源

2010-04-07 05:04:02

我會用什麼jQuery代碼或插件來更新元素的位置？

回答

相關問題