Question

我正在使用jQuery UI Datepicker小部件。当用户更改窗口小部件上的月份或年份时，我的代码向服务器发出ajax请求，以获取该月/年的突出显示日期。为了向用户提供网页正在等待服务器的指示，我正试图使日期选择器变灰并显示加载图像。我已经可以完成所有这些了，除了我在获取灰色部分的高度和宽度以匹配datepicker小部件的高度和宽度方面遇到了问题。

因为每次调用叠加层时，日期选择器的高度可能会根据一个月内的周数而改变，所以我尝试使用jQuery来获取窗口小部件的高度，然后显示叠加层。但是，高度似乎永远不会与日期选择器的实际高度相匹配。以下是我尝试设置高度的两种方法。

$('#loading').height($('.ui-datepicker-calendar').height() + $('.ui-datepicker-header').height())

和

$('#loading').height($('.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all').height())

两者都不奏效。有没有人知道我可以通过编程方式获取jQuery UI Datepicker小部件的高度和宽度？

Answer 1

这是一个很长的镜头，因为我无法准确地告诉the height never seems to match the actual height你的意思，除了它没有覆盖整个日期选择器。对此的解决方案可能是outerWidth()和outerHeight()。这些函数获取元素的宽度，包括边框，填充和（可选）边距：

$('#loading').height($('.ui-datepicker-calendar').outerHeight(false) + $('.ui-datepicker-header').outerHeight(false))

$('#loading').height($('.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all').outerHeight(false))

outerHeight(false)表示“获取高度加上填充和边框，但忽略边距”。如果您想要包含边距，请将其设置为true。

Answer 2

height()工作正常，问题是其他人编辑了文件并在我不知情的情况下添加了填充。因此，当我设置高度时，它总是添加了一堆额外的像素，使得我的叠加层对于datepicker小部件来说太大了。此外，选择.ui-datepicker-inline就足够了。所以我最后的jQuery代码是：

$('#loading').height($('.ui-datepicker-inline').height());

获取jQuery UI Datepicker的高度和宽度

2 个答案: