dojo Показать / скрыть одну панель содержимого, в то время как другая панель содержимого является жидкой

Question

Я боролся в течение нескольких недель, пытаясь взломать этот орех, поэтому я не уверен, что это невозможно, или это мое отсутствие кодирования отбивных... или и то, и другое. Я не программист, и я новичок в Dojo Toolkit.

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

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

Я создал упрощенную версию кода, чтобы продемонстрировать свою задачу (см. Ссылку ниже). Если вы загрузите страницу, вы увидите, что центр ContentPane прокручивает содержимое. Но если вы затем нажмете на кнопку, раскрывающийся элемент div развернется над содержимым. Затем при прокрутке вы заметите, что не видите всю панель, потому что она находится на ничейной земле под нижней частью окна браузера. Я предполагаю, что, поскольку div настроен для отображения: ни один при загрузке, его размер не учитывается при загрузке страницы. Затем, когда вы открываете его, нажимая кнопку, его размер является аддитивным, и на панели ниже не видно, как изменить размер или учесть новый элемент.

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

Кто-нибудь имеет какие-либо идеи, как я могу сделать это так, чтобы нижняя панель поместилась в пространстве, не отрываясь от экрана?

Вот пример страницы:

http://equium.com/scaffold.html

(У меня были некоторые проблемы при попытке вставить здесь полную HTML-страницу в качестве примера кода, поэтому, если это предпочтительный способ обработки, и кто-то может сообщить мне лучший способ встраивания всего этого кода, я был бы признателен.)

Спасибо заранее, я бы очень признателен за любые отзывы.

Answer 1

Возможно, вы захотите взглянуть на dojox.layout.ExpandoPane (хотя, предупреждаю, я думаю, что какое-то время он работал только для верхней и левой областей).

Кроме того, я бы предложил немного упростить / изменить ваш макет. Смотрите пример здесь:

http://jsfiddle.net/taFzv/

(Вероятно, потребуется немного настроить, чтобы получить именно то, что вы хотите.)

Реальная проблема, с которой вы столкнулись, заключается в том, что BorderContainer не знает, как изменились части представления. ExpandoPane позаботится об этом, сообщив BorderContainer о перекомпоновке после завершения анимации.

Answer 2

Работает под IE8.0. Когда раскрывающийся список открыт, просто продолжайте нажимать кнопку мыши со страницы и перетаскивайте ее вниз, чтобы увидеть, как содержимое было перемещено со страницы. Похоже, что браузер не может обнаружить его и не может добавить его в учетную запись "полосы прокрутки".

Answer 3

Может быть, dijit.form.DropDownButton будет соответствовать вашим потребностям. При нажатии на кнопку отображается всплывающая подсказка, которая может быть заполнена любым содержимым, которое вы хотите. Как вы указали, всплывающая подсказка отображается только при нажатии кнопки, и она вообще не мешает основному макету. Подсказка находится "сверху" страницы.

Answer 4

Я бы посоветовал убрать все BorderContainers, за исключением вашего первого уровня, с идентификатором mainPage.

Поместите ваш div {stuff here} в mainPage BorderContainer, после ContentPane с помощью кнопки Закрыть / Открыть. Удостоверьтесь, что вы делаете это dojotype dijit.layout.ContentPane, устанавливаете layoutpriority и устанавливаете регион на вершину. Установите высоту 0/x при нажатии кнопки "Открыть / Закрыть" вместо настройки отображения.

Попробуйте свою страницу еще раз. Если это не помогает, вам, вероятно, понадобится вызов макета, изменение размера или и то, и другое, чтобы указать BorderContainer, что ему нужно оценить все свои дочерние элементы и правильно определить размер центральной панели. Что-то вроде dijit.byId("mainPage"). Layout(); Делайте это каждый раз, когда кто-то нажимает кнопку "Закрыть / Открыть", после того как вы изменили высоту дочерних элементов BorderContainer.