AJAX 컨트롤 도구 키트의 Accordion 컨트롤은 여러 창을 제공하며 사용자가 한 번에 하나의 창을 표시할 수 있도록 합니다. 패널은 일반적으로 페이지 자체 내에서 선언되지만 서버 쪽 코드를 사용하여 동일한 결과를 얻을 수 있습니다.
개요
AJAX 컨트롤 도구 키트의 Accordion 컨트롤은 여러 창을 제공하며 사용자가 한 번에 하나의 창을 표시할 수 있도록 합니다. 패널은 일반적으로 페이지 자체 내에서 선언되지만 서버 쪽 코드를 사용하여 동일한 결과를 얻을 수 있습니다.
단계
Accordion 컨트롤은 모든 중요한 속성을 서버 쪽 코드에 노출합니다. 무엇보다도, 속성은 Panes 아코디언을 구성하는 창의 컬렉션에 대한 액세스 권한을 부여합니다. 모든 창에는 형식 AccordionPane이 있습니다. 따라서 이러한 창을 만드는 것은 사소한 일입니다.
AccordionPane ap1 = 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">
void Page_Load()
{
if (!Page.IsPostBack)
{
AccordionPane ap1 = new AccordionPane();
ap1.HeaderContainer.Controls.Add(new LiteralControl("Using Markup"));
ap1.ContentContainer.Controls.Add(new
LiteralControl("Adding panes using markup is really simple."));
AccordionPane ap2 = 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);
}
}
</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>
아코디언의 데이터가 서버 쪽 코드에 의해 동적으로 추가되었습니다(전체 크기 이미지를 보려면 클릭).
