ASP.NET Ajax Accordion

-- ASP.NET 2012. 6. 21. 14:11
,
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
ASP.NET Ajax Control Toolkit을 이용하여 Accordion을 이용해보자.
Accordion이라는 악기처럼 펼쳤다가 닫았다가 하는 컨트롤이라고 생각하면 쉽다.

먼저 Ajax Control Toolkit을 선언한다.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></cc1:ToolkitScriptManager>

그리고, 실제로 Accordion을 구현해보자.

<css>
.accordion_toggle {
    height: 30px;
}
</css>
<cc1:Accordion ID="Accordion1" runat="server" Width="7000%" Height="350px" HeaderCssClass="accordion_toggle" FadeTransitions="true" ContentCssClass="" AutoSize="None" SelectedIndex="-1" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
    <Panes>
        <cc1:AccordionPane ID="AccordionPane3" runat="server">
            <Header>
                // 닫혀 있을때, 마우스로 누르는 부분
            </Header>
            <Content>
                // 펼쳐졌을 때 표시되는 내용 부분
            </Content>
        </cc1:AccordionPane>
    </Panels>
</cc1:Accordion>

혹시 자바스크립트로 Accordion을 제어해야 할 경우가 있다면 아래의 코드를 이용하면 된다.

acd1 = $get('<%=Accordion1.ClientID%>');
acd1.AccordionBehavior.set_SelectedIndex(0); // 아코디언 열기
acd1.AccordionBehavior.set_SelectedIndex(-1); // 아코디언 닫기

'-- ASP.NET' 카테고리의 다른 글

Web Service VS Web API  (0) 2012.08.08
ajax password strength check  (0) 2012.06.21
마스터페이지 (master page)  (0) 2012.06.21
cross domain 해결하기  (0) 2012.03.19
SOAP WebService 만들기 및 테스트  (0) 2012.03.09
posted by 어린왕자악꿍

티스토리툴바