JavaScript에서 패널 축소 및 확장(VB)Collapsing and Expanding a Panel from JavaScript (VB)
Christian Wenz 별by Christian Wenz
코드 다운로드 또는 PDF 다운로드Download Code or Download PDF
ASP.NET AJAX 컨트롤 도구 키트의 CollapsiblePanel 컨트롤은 패널을 확장 하 고 콘텐츠를 축소 하 고 다시 확장할 수 있는 기능을 제공 합니다.The CollapsiblePanel control in the ASP.NET AJAX Control Toolkit extends a panel and provides it with the capability to collapse its contents and expand it again. 이러한 두 작업은 사용자 지정 JavaScript 코드에서 트리거될 수도 있습니다.These two actions can also be triggered from custom JavaScript code.
개요Overview
ASP.NET AJAX 컨트롤 도구 키트의 CollapsiblePanel 컨트롤은 패널을 확장 하 고 콘텐츠를 축소 하 고 다시 확장할 수 있는 기능을 제공 합니다.The CollapsiblePanel control in the ASP.NET AJAX Control Toolkit extends a panel and provides it with the capability to collapse its contents and expand it again. 이러한 두 작업은 사용자 지정 JavaScript 코드에서 트리거될 수도 있습니다.These two actions can also be triggered from custom JavaScript code.
단계Steps
먼저 새 ASP.NET 페이지를 만들고 하나의 <form> 요소 내에 ScriptManager를 포함 합니다.First of all, create a new ASP.NET page and include the ScriptManager within the one <form> element. 그러면 컨트롤 도구 키트에 필요한 ASP.NET AJAX 라이브러리가 로드 됩니다.This loads the ASP.NET AJAX library which is required by the Control Toolkit:
<asp:ScriptManager ID="asm" runat="server" />
그런 다음 축소/확장 효과를 볼 수 있도록 몇 가지 텍스트가 포함 된 패널을 만듭니다.Then, create a panel with some text so that the collapse/expand effect can be seen:
<asp:Panel ID="Panel1" CssClass="panelClass" runat="server">
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
</asp:Panel>
여기에서 볼 수 있듯이 패널은 여기에 표시 되는 CSS 클래스를 참조 합니다. 기본적으로 배경색과 패널의 너비를 정의 합니다.As you can see, the panel references a CSS class which is shown here (and basically defines a background color and the panel's width):
<style type="text/css">
.panelClass {background-color: lime; width: 300px;}
</style>
CollapsiblePanelExtender 컨트롤에는 TargetControlID 특성이 필요 하므로 toolkit에서 요청 시 축소 하거나 확장할 패널을 알 수 있습니다.The CollapsiblePanelExtender control requires the TargetControlID attribute so that the toolkit knows which panel to collapse or expand upon request:
<ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="server"
TargetControlID="Panel1" />
아쉽게도 extender는 현재 패널을 축소 하거나 확장 하기 위한 특정 API를 노출 하지 않지만 일부 문서화 되지 않은 메서드는이 작업을 수행 합니다.Unfortunately, the extender currently does not expose a specific API for collapsing or expanding the panel, but some undocumented methods will do. 먼저 페이지에 세 개의 HTML 단추를 추가 합니다. 그러면이 페이지에 클라이언트 쪽 JavaScript를 트리거하여 패널의 내용을 축소 하거나 확장 합니다.First of all, add three HTML buttons to the page which will then trigger the client-side JavaScript to collapse or expand the panel's contents:
<input type="button" id="Button1" runat="server" value="Open" onclick="doOpen();" />
<input type="button" id="Button2" runat="server" value="Close" onclick="doClose();" />
<input type="button" id="Button3" runat="server" value="Toggle" onclick="doToggle();" />
클라이언트 쪽 JavaScript 코드 (<script type="text/javascript">시작)에서는 $find() 메서드를 사용 하 여 CollapsiblePanelExtender에 액세스 해야 합니다.In the client-side JavaScript code (started with <script type="text/javascript">), the $find() method needs to be used to access the CollapsiblePanelExtender. $find("cpe")은이에 대 한 참조를 반환 합니다.$find("cpe") will return a reference to it. 여기서 특정 메서드는 현재 작업을 해결 합니다.From there on, specific methods will solve the task at hand.
패널을 열기 (확장) 하는 메서드를 _doOpen()이라고 합니다. 다음 코드는 첫 번째 단추를 클릭할 때 호출 되는 doOpen() 함수를 구현 합니다.The method for opening (expanding) the panel is called _doOpen(); the following code implements the doOpen() function called when the first button is clicked:
function doOpen()
{
$find("cpe")._doOpen();
}
패널을 닫거나 축소 하려면 _doClose() 메서드를 실행 해야 합니다.For closing, or collapsing the panel, the _doClose() method needs to be executed. 따라서 사용자가 두 번째 단추를 클릭 하면 다음 JavaScript 코드가 호출 됩니다.So when the user clicks on the second button, the following JavaScript code is called:
function doClose()
{
$find("cpe")._doClose();
}
세 번째 단추는 패널의 상태를 축소 됨에서 확장 됨으로 전환 하 고 그 반대의 경우도 마찬가지입니다.The third button toggles the state of the panel: from collapsed to expanded, and vice versa. CollapsiblePanelExtender는이 패널의 상태를 반대로 하는 toggle() 메서드를 노출 합니다.The CollapsiblePanelExtender exposes the toggle() method which does exactly that: reverses the state of the panel. 그러나 toggle() 메서드에서 내부적으로 사용 하는 다른 방법도 있습니다. CollapsiblePanelExtender()의 get_Collapsed() 메서드는 패널이 축소 되었는지 여부를 알려 줍니다.However there is also another approach (which is internally used by the toggle() method): The get_Collapsed() method of the CollapsiblePanelExtender() tells us whether the panel is collapsed or not. 이 함수의 반환 값에 따라 패널은 확장 (_doOpen() 메서드) 또는 축소 (_doClose()) 메서드 중 하나가 됩니다.Depending on the return value of this function, the panel is then either expanded (_doOpen() method) or collapsed (_doClose()) method:
function doToggle()
{
var cpe = $find("cpe");
//cpe._toggle();
if (cpe.get_Collapsed()) {
cpe._doOpen();
} else {
cpe._doClose();
}
}
세 번째 단추는 패널의 상태를 축소 됨에서 확장 됨과 뒤로 변경 (전체 크기 이미지를 보려면 클릭) 합니다.The third button changes the state of the panel: from collapsed to expanded and back (Click to view full-size image)
