獲取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的高度和寬度

回答

相關問題