Получить высоту и ширину указателя даты пользовательского интерфейса jQuery

ProgramBox

Получить высоту и ширину указателя даты пользовательского интерфейса jQuery

Post author:admin
Запись опубликована:10 марта, 2023
Post category:Вопросы по программированию

#javascript #jquery #css #jquery-ui #jquery-ui-datepicker

#javascript #jquery #css #jquery-пользовательский интерфейс #jquery-ui-datepicker

Вопрос:

Я использую виджет 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?

1. пытался использовать var s с .outerHeight() или .outerHeight(true) ? И чем-то вроде: $('#loading').height( dP_cal dP_hea );

2. Во-первых, я думаю, вам нужны пробелы перед каждым . селектором класса (я думаю?). Во-вторых, если вы точно знаете, что это правильный элемент для выбора высоты, вы пробовали .outerHeight(true) ?

3. @Jared Я думаю , что отсутствие пробелов в этом случае нормально — пользовательский интерфейс jQuery помещает много классов в один и тот же элемент.

4. @JamWaffles — Когда я набирал его, я не был уверен, так что спасибо, что прояснили это. :) И я не знаю, может быть, борода и очки вам подойдут. :P

5. @JamWaffles — (Хроники не по теме, т. III, воскресный выпуск) Я достаточно взрослый, чтобы вырастить его, но поскольку я не могу (я выгляжу очень неряшливо, а большие пятна не растут), я бы просто сказал: «… однажды …»

Ответ №1:

Это рискованно, так как я не могу точно сказать, что вы имеете в виду the height never seems to match the actual height , кроме того, что это не охватывает весь datepicker. Решением этой проблемы может быть 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 равным, если вы хотите включить и поле.

1. Ваше предложение не работает. Моя проблема в том, что наложение слишком велико. Вот результаты, которые я получаю от каждого метода высоты. height() 194px, outerHeight() 198px (как false, так и true), innerHeight() 196px (как false, так и true). Однако, играя с консолью, я нахожу высоту ближе к 120px. Я получил селекторы, которые использовал в своем примере кода, используя элемент inspect от firebug. Когда я наведу курсор мыши на этот элемент в коде, выделенный раздел на странице идеально соответствует высоте виджета. Тем не менее, по какой-то причине я не могу получить эту высоту с помощью jQuery.

2. Что ж, ни я, ни кто-либо другой не можем предложить что-либо еще, если вы не дадите нам какой-нибудь код, примеры или скриншоты для работы. Попробуйте изменить свои селекторы CSS, чтобы найти элементы внутри содержимого div или что-то в этом роде.

3. Я поддержал ваш ответ, потому что я не знал о функциях innerHeight() and outerHeight() . Однако проблема заключалась в том, что кто-то отредактировал файл и добавил дополнение к классу css без моего ведома.

4. Да, я опубликовал свое исправление выше. Спасибо за помощь.

Ответ №2:

height() работает нормально, проблема заключалась в том, что кто-то другой отредактировал файл и добавил отступы без моего ведома. Поэтому, когда я устанавливал высоту, всегда добавлялась куча дополнительных пикселей, что делало мое наложение слишком большим для виджета datepicker. Кроме того, достаточно выбрать .ui-datepicker-inline . Итак, мой окончательный код jQuery:

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