AJAX 컨트롤 도구 키트의 Accordion 컨트롤은 여러 창을 제공하며 사용자가 한 번에 하나의 창을 표시할 수 있도록 합니다. 패널은 일반적으로 페이지 자체 내에서 선언되지만 서버 쪽 코드를 사용하여 동일한 결과를 얻을 수 있습니다.
개요
AJAX 컨트롤 도구 키트의 Accordion 컨트롤은 여러 창을 제공하며 사용자가 한 번에 하나의 창을 표시할 수 있도록 합니다. 패널은 일반적으로 페이지 자체 내에서 선언되지만 서버 쪽 코드를 사용하여 동일한 결과를 얻을 수 있습니다.
단계
Accordion 컨트롤은 모든 중요한 속성을 서버 쪽 코드에 노출합니다. 무엇보다도, 속성은 Panes 아코디언을 구성하는 창의 컬렉션에 대한 액세스 권한을 부여합니다. 모든 창에는 형식 AccordionPane이 있습니다. 따라서 이러한 창을 만드는 것은 사소한 일입니다.
Dim ap1 As New AccordionPane()
의 속성 AccordionPane 은 HeaderContainer 창의 헤더 섹션 내에서 ASP.NET 컨트롤에 대한 액세스를 제공합니다. 의 속성 AccordionPane 은 ContentContainer 창의 콘텐츠 섹션에 대해 동일하게 수행됩니다. 이렇게 하면 ASP.NET 코드가 창에 콘텐츠를 추가할 수 있습니다.
ap1.HeaderContainer.Controls.Add(New LiteralControl("Using Code"))
ap1.ContentContainer.Controls.Add(New LiteralControl("Adding panes using code is really flexible."))
마지막으로 아코디언 컬렉션에 Panes 창을 추가해야 합니다.
acc1.Panes.Add(ap1)
다음은 Accordion 컨트롤에 두 개의 창을 추가하는 전체 서버 쪽 코드입니다.
<script runat="server">
Sub Page_Load()
If Not Page.IsPostBack Then
Dim ap1 As New AccordionPane()
ap1.HeaderContainer.Controls.Add(New LiteralControl("Using Markup"))
ap1.ContentContainer.Controls.Add(New LiteralControl("Adding panes using markup is really simple."))
Dim ap2 As New AccordionPane()
ap2.HeaderContainer.Controls.Add(New LiteralControl("Using Code"))
ap2.ContentContainer.Controls.Add(New LiteralControl("Adding panes using code is really flexible."))
acc1.Panes.Add(ap1)
acc1.Panes.Add(ap2)
End If
End Sub
</script>
유일하게 누락된 요소는 ASP.NET ScriptManager 컨트롤의 존재에 따라 달라지는 아코디언 자체입니다.
<form id="form1" runat="server">
<asp:ScriptManager ID="asm" runat="server" />
<div>
<ajaxToolkit:Accordion ID="acc1" runat="server"
HeaderCssClass="header" ContentCssClass="content" Width="300px" FadeTransitions="true">
</ajaxToolkit:Accordion>
</div>
</form>
예제를 완료하기 위해 Accordion 컨트롤에서 참조되는 두 CSS 클래스는 브라우저에 대한 스타일 정보를 제공합니다.
<style type="text/css">
.header {background-color: blue;}
.content {border: solid;}
</style>
아코디언의 데이터가 서버 쪽 코드에 의해 동적으로 추가되었습니다(전체 크기 이미지를 보려면 클릭).
