Рефакторинг jquery animate - PullRequest
Новая
       9

Рефакторинг jquery animate

4 голосов
/ 30 ноября 2011

Я использую плагин datepicker из здесь - Пример находится внизу страницы.

Он использует jquery animate () следующим образом: 

$('#widgetField>a').bind('click', function(){
    $('#widgetCalendar').stop().animate({height: state ? 0 : $('#widgetCalendar div.datepicker').get(0).offsetHeight}, 500);
    state = !state;
    return false;
});

Мне нужна рекомендация о том, как преобразовать это в подобный аккордеону расширяющийся div.Я не хочу, чтобы календарь плавал, мне нужно, чтобы он опустил содержимое div под ним.

Рекомендации?

1 Ответ

2 голосов
/ 09 декабря 2011

Обновленный ответ

Виджет плавает, потому что у него есть позиция: абсолютная; и смещение высоты в функции jquery.

См. Css:

#widgetCalendar имеет стиль, позиция: абсолют. Вам нужно будет удалить это, что заставит его работать, но тогда возникнут дополнительные проблемы со стилем, которые можно решить с помощью настроек CSS.

Или вы можете попробовать использовать jQuery .slidedown: 

 $('#widgetCalendar').slideDown();

Тогда вам не нужно смещение по высоте.

Было бы здорово, если бы вы могли выполнить jsfiddle, поскольку я не могу проверить, не видя, что вы делаете.

Отредактировано - пользователь не использует jQuery UI

Это связано с природой jquery UI - календарь представляет собой специализированный диалог. Диалоговое окно jQuery UI - это попин. Но вы можете противодействовать этому: 

<script>
$(function() {
    $( "#datepicker" ).datepicker();
});
</script>

Отображение средства выбора даты, встроенного в страницу, а не в наложение. Просто вызовите .datepicker () для div вместо ввода.

...