Client-side Object Model

Step 1

Step 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus ac nibh viverra faucibus. Mauris non vestibulum dui
Step 2

Step 2

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus.
Step 3

Step 3

Sed facilisis placerat commodo. Nam odio dolor, viverra eu blandit in, hendrerit eu arcu. In hac habitasse platea dictumst.
Step 4

Step 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac lacus ac nibh viverra faucibus. Mauris non vestibulum dui.

Log
Settings
설명

이 샘플에서는 클라이언트 측 스크립트를 사용하여 아코디언 동작 또는 모양을 수정하는 방법을 보여 줍니다.

샘플에 사용되는 클라이언트 측 옵션 목록:

  • requireOpenedPane - 머리글을 클릭하면 현재 열려 있는 창이 닫히는지 여부(모든 아코디언의 창을 닫은 상태로 유지)를 결정합니다.
  • selectedIndex - 현재 확장되어 있는 아코디언 창의 인덱스입니다.

샘플에 사용되는 클라이언트 측 메서드 목록:

  • add(header, content) - 아코디언 창을 아코디언의 끝에 추가합니다.
  • insert(index, header, content) - 지정된 인덱스에 아코디언 창을 삽입합니다.
  • count() - 아코디언 창의 개수를 가져옵니다.
  • removeAt(index) - 인덱스를 기준으로 아코디언 창을 제거합니다.
  • clear() - 모든 아코디언 창을 제거합니다.

OnClientSelectedIndexChanged 속성은 다음 클라이언트 측 스크립트에서 selectedIndexChanged 이벤트를 수신하는 데 사용됩니다.

<C1Accordion:C1Accordion runat="server" 
		ID="C1Accordion1" 		
		OnClientSelectedIndexChanged="onClientSelectedIndexChanged">
.....
</C1Accordion:C1Accordion>
<script language="javascript" type="text/javascript">
	function onClientSelectedIndexChanged(ev, args) {
		log.message("The new selectedIndex value is " + args.newIndex);
	}
</script>

다음 코드에서는 클라이언트 측 스크립트를 사용하여 새 아코디언 창을 추가하는 방법을 설명합니다.

$("#<%=C1Accordion1.ClientID%>").c1accordion("add", "my header", "my content");

도움말