Как сделать высоту аккордеона dijit динамичной
-
20-09-2019 - |
Вопрос
Я не могу понять, как сообщить accordioncontainer установить высоту своей панели accordion в значение auto, чтобы высота панели была динамической в зависимости от ее содержимого.
В следующем коде я добавляю две панели в accordioncontainer.Один имеет высоту 10 пикселей, а другой - 90 пикселей, но в обоих случаях высота панели аккордеона рассчитывается как 10 пикселей.Похоже, он всегда занимает высоту первого.
var accordionContainer = new dijit.layout.AccordionContainer({'id':'accContainer'}).placeAt("test");
var accordPane = new dijit.layout.ContentPane({"title": "test", "content":"<div style='height:10px'>sdfsdfsdf</div>"});
var accordPane2 = new dijit.layout.ContentPane({"title": "test1", "content":"<div style='height:90px'>sdfsdfsdf</div>"});
accordionContainer.addChild(accordPane);
accordionContainer.addChild(accordPane2, 1);
accordPane.startup();
accordPane2.startup();
accordionContainer.startup();
accordionContainer.selectChild(accordPane2);
Я использую dojo 1.3.2
Решение 2
Я переопределил функцию _getTargetHeight в dijit.layout.AccordionContainer и всегда возвращаю 'auto' для высоты.Анимация раздвижных панелей будет работать некорректно, но это не так заметно.
_getTargetHeight: function(/* Node */ node){
// summary:
//For the given node, returns the height that should be
//set to achieve our vertical space (subtract any padding
//we may have).
//This is used by the animations.
//var cs = dojo.getComputedStyle(node);
//return Math.max(this._verticalSpace - dojo._getPadBorderExtents(node, cs).h, 0);
return 'auto';
}
Другие советы
В настоящее время это невозможно.Я написал блог / пример кода, чтобы объяснить, почему и как сгенерировать группу TitlePane, которые расширяются до их естественной высоты (а не высоты контейнера для AccordionContainer):
http://www.sitepen.com/blog/2008/10/21/quick-fixes-and-dojo-support/
Для этого требуется создать один виджет TitleGroup (пользовательский, код в блоге) и разместить внутри него TitlePane.Каждый из них ведет себя в основном как AccordionPane (с атрибутами title = "", возможностями загрузки href = "" и т.д.) И делегирует щелчки по заголовку для управления открытым / закрытым состоянием братьев и сестер.
попробуйте настроить размеры самого контейнера Accordion на размер, достаточный для размещения вашего контента плюс необходимых заголовков, например
#accContainer{
height: 120px;
width: 200px;
}
Вызов startup() в контейнере должен запустить дочерние панели для вас.
Теперь вы также можете просто использовать dijit.TitlePane
s вообще без контейнера.Вы можете пройти open: false
когда вы создаете экземпляры панелей, для начала они должны быть закрыты.Я думаю, заключив их в dojox.widget.TitleGroup
будет имитировать поведение при одновременном открытии 1 устройства.