CollapsiblePanelExtender : 클라이언트 측 자바 스크립트에서 접기/펼치기를 시작할 수 있습니까? (AJAX Control Toolkit)

Question

CollapsiblePanelExtender는 주로 사용자 마우스 이벤트에 응답하여 사물을 축소/확장하도록 설계되었습니다. Extender가 클라이언트 측 자바 스크립트에 대한 응답으로 항목을 축소/확장하도록하는 좋은 방법이 있습니까?

내 특별한 경우에는 페이지에 CollapsiblePanelExtenders (및 해당 패널)가 여러 개 있고 클라이언트에서 이처럼 엄격하게 "모든 패널 확장"버튼을 구현할 수 있는지 궁금합니다. 측면 : 내가 한 경우

for each CollapsiblePanelExtender on this page, call somethingOrOther(extender) 

내가 대신 전체 포스트 백을이 로직 서버 쪽을 구현할 수 있지만, 내 페이지를로드하는 데 시간이 오래 걸립니다, 그것은 매우 매끄러운 사용자에게 제공 할 것 같은이 보이지 않는다 경험. 따라서 클라이언트 측 확장/축소에 관심이 있습니다.

AJAX Control Toolkit 사람들이 염두에 두었던 사용 사례가 아닌 것 같지만 확인해 보았습니다.

Answer 1

나는 부분적으로 작동하는 해결책이 있습니다.

나는 이안의 제안에 따라 툴킷 소스를 조사했다. CollapsiblePanelBehavior.debug.js에서 expandPanel()은 해당 동작에 대한 공용 인터페이스의 일부로 지정 될 수 있습니다. get_Collapsed()도 있습니다. 자바 스크립트에서 이러한 동작에 접근하는 열쇠는 ASP.NET의 CollapsiblePanelExtender 태그에 BehaviorID 속성을 설정하는 것 같습니다.

나는 나의 페이지에 중계기를 수정 그래서 BehaviorID들이 라인을 따라, 예견 할 것을 ..

<ajaxToolkit:CollapsiblePanelExtender 
    BehaviorID="<%#'collapsebehavior'+DataBinder.Eval(Container.DataItem,'id')%>" 
    ID="CollapsiblePanelExtender" runat="server" /> 

이 collapsebehavior1, collapsebehavior2, collapsebehavior3 등이라는 행동과 결과이와

다음과 같이 클라이언트의 축소 가능한 패널을 모두 확장 할 수 있습니다.

function expandAll() { 
    var i = 0; 
    while (true) { 
     i++; 
     var name = 'collapsebehavior' + i; 
     var theBehavior = $find(name); 
     if (theBehavior) { 
      var isCollapsed = theBehavior.get_Collapsed(); 
      if (isCollapsed) { 
       theBehavior.expandPanel(); 
      }    
     } else { 
      // No more more panels to examine 
      break; 
     } 
    } 
} 

정말 그런 식으로 루프에 $find을 사용하여 확실 해요,하지만 그건 내가 지금까지 가지고있는거야.

또한 Firefox에서 작동하지 않습니다. (FF에서는 첫 번째 요소 만 확장되고 Control Toolkit 코드 안에 자바 스크립트 오류가 있습니다.)

이것은 모든 자바 스크립트 전문가에게 매우 추악한 것처럼 보입니다. 어쩌면 나중에 정리할 수도 있고, 나를 도울 수 있습니다.

Answer 2

또한 단지/붕괴 확장 된 상태 사이를 전환 할 패널을 전환 할 수 있습니다 :

function toggle() { 
     var MenuCollapser = $find("name"); 
     MenuCollapser.togglePanel(); 
    } 

Answer 3

을/이미지의 OnClick 이벤트에 다음 코드를 작성 버튼이 도움이

<asp:Image ID="img1" runat="server" OnClick="ExpandCollapse()"/> 

function ExpandCollapse() { 
    $find("collapsibleBehavior1").set_Collapsed(true); 
    $find("collapsibleBehavior2").set_Collapsed(true); 
} 

희망을!