获取jQuery UI DatePicker的高度和宽度

我正在使用jQuery UI Datepicker小部件。当用户更改窗口小部件的月份或年份时，我的代码会向服务器发出ajax请求以获取该月份/年份的突出显示日期。为了给用户指示该网页正在等待服务器，我正在尝试将日期选择器变灰并显示加载图像。我已经可以完成所有这些工作了，除了我在获取灰色部分的高度和宽度以匹配日期选择器部件的高度和宽度时遇到问题。获取jQuery UI 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小部件的高度和宽度吗？

来源

2011-10-02 rhololkeolke

试图使用'var's'.outerHeight（）'或'.outerHeight（true）'？而不是像：'$（'＃loading'）。height（dP_cal + dP_hea）;' –

首先，我想你想在每个'''类选择器（我认为？）之前的空格。其次，如果您确定这是选择高度的正确元素，那么您是否试过['.outerHeight（true）']（http://api.jquery.com/outerHeight/）？ –

@Jared I _think_在这种情况下没有空格是可以的 - jQuery UI在同一个元素上放置了很多类。 – Bojangles

这是一个长镜头，因为我不能告诉你确切的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。

来源

2011-10-02 20:58:18 Bojangles

你的建议不起作用。我的问题是叠加太大。这里是我从每个高度方法得到的结果。 height（）194px，outerHeight（）198px（false和true），innerHeight（）196px（false和true）。但是，通过使用控制台，我发现高度接近120px。我通过使用萤火虫的检查元素得到了我在示例代码中使用的选择器。当我在代码中将鼠标悬停在该元素上时，页面上突出显示的部分与小部件高度完美匹配。然而，出于某种原因，我似乎无法用jQuery获得这样的高度。 – rhololkeolke

那么，如果你不给我们一些代码，例子或截图来处理，我或其他人都可以提出任何其他建议。尝试改变你的CSS选择器来查找包含'div'或其他内容的元素。 – Bojangles

我upvoted你的答案，因为我不知道'innerHeight（）'和'outerHeight（）'函数。然而，问题是某人编辑了这个文件，并且在我不知情的情况下向css类添加了填充。 – rhololkeolke

height()工作正常，问题是，别人已经编辑的文件，并添加填充我不知情的情况。所以当我设置高度时，它总是会添加一堆额外的像素，这使得我的覆盖层对于日期选择器小部件来说太大了。另外，选择.ui-datepicker-inline就足够了。所以我最终的jQuery代码是：

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

来源

2011-10-03 13:41:43 rhololkeolke

获取jQuery UI DatePicker的高度和宽度

回答

相关问题