Dijit 아코디언 페인의 높이를 역동적으로 만드는 방법

StackOverflow https://stackoverflow.com/questions/1364140

  •  20-09-2019
  •  | 
  •  

문제

나는 아코디언 컨테이너에게 아코디언 창의 높이를 자동으로 설정하도록 지시하는 방법을 알 수 없어 창의 높이가 내용에 따라 동적이되도록하는 방법을 알 수 없습니다.

다음 코드에서는 아코디언 컨테이너에 두 개의 창을 추가하고 있습니다. 하나는 높이가 10px이고 다른 하나는 90px를 가지지 만 두 경우 모두 아코디언 창의 높이는 10px로 계산됩니다. 항상 첫 번째 높이를 얻는 것처럼 보입니다. 

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&gt;"});
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

나는 dijit.layout.accordionContainer의 _getTargetheight 함수를 무시하고 항상 높이를 위해 '자동'을 반환합니다. 슬라이딩 패널의 애니메이션은 올바르게 작동하지 않지만 눈에 띄지 않습니다.

_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';
}

다른 팁

현재는 불가능합니다. 나는 블로그 / 샘플 코드를 작성하여 자연스러운 높이로 확장되는 타이틀 팬 그룹을 생성하는 이유와 방법을 설명했습니다 (아코디언 컨테이너를위한 컨테이너의 높이가 아닌).

http://www.sitepen.com/blog/2008/10/21/quick-fixes-and-dojo-support/

단일 타이틀 그룹 위젯 (블로그의 사용자 정의, 코드)을 만들고 TitlePane의 내부를 배치해야합니다. 각각은 주로 아코디언 페인 (title = ""속성, href = ""로딩 기능 등)을 좋아하며 제목 클릭을 위임하여 열린/폐쇄 된 형제 상태를 관리합니다.

아코디언 컨테이너 자체의 크기를 콘텐츠와 필요한 제목 판을 보유 할 수있는 크기로 설정하십시오.

#accContainer{
  height: 120px;
  width: 200px;
}

컨테이너의 startup () 호출은 어린이 판을 시작해야합니다.

이제 만 사용할 수도 있습니다 dijit.TitlePane컨테이너가 전혀없는 s. 당신은 통과 할 수 있습니다 open: false 당신이 창을 인스턴스화하여 닫히기 시작합니다. 나는 그것들을 a dojox.widget.TitleGroup 한 번에 1 개를 개방하는 동작을 모방합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top