jQuery 를 사용하면서 ASP.NET 서버컨트롤와 절묘하게 상호작용이 되는 것을 보고
이래 저래 마음이 설레이곤 합니다.
이번에는 jQuery 를 이용하여 ASP.NET 서버컨트롤인 Panel 을 슬라이드 방법으로 보이고 감추는 방법에
대해서 구현해 볼까 합니다. 이는 ASP.NET AJAX 의 툴킷에 있는 CollapsiblePanel 컨트롤과 비슷한 효과를 보여주는데요.
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CollapsiblePanel/CollapsiblePanel.aspx
하지만 TargetControlID 속성으로 하나의 panel 로만 핸들링이 가능한데요. 두개 이상일 경우에는 어떻게 개발을 해야 할지
궁금하네요.
하지만, jQuery 는 서버단에서 개발하지 않고 클라이언트 단에서 어떻게 처리하는지 확인해 볼까 합니다. 그리고 panel 이 하나가 아니라 다수인 3개를 가지고 + 버튼을 누르면 하나씩 슬라이드로 보여주며, - 버튼을 누르면 하나씩 접혀지는 모습을 보여줍니다.
구현도 그렇게 어렵지 않고, CSS 구현과 약간의 자바스크립트 코드로 쉽게 이용할 수 있습니다.
<body><form id="form1" runat="server"><div><div class="cpHeader"><asp:ImageButton ID="btnShow" ImageUrl="~/Images/Show.gif" runat="server"OnClientClick="return false;" /><asp:ImageButton ID="btnHide" ImageUrl="~/Images/Hide.gif" runat="server"OnClientClick="return false;" /></div><asp:Panel ID="Panel1" runat="server" class='cpBody'><asp:Label ID="Label1" runat="server" Text="Label">심재운</asp:Label></asp:Panel><asp:Panel ID="Panel2" runat="server" class='cpBody'><asp:Label ID="Label2" runat="server" Text="Label">권판진</asp:Label></asp:Panel><asp:Panel ID="Panel3" runat="server" class='cpBody'><asp:Label ID="Label3" runat="server" Text="Label">이유진</asp:Label></asp:Panel></div></form></body>
+ 버튼은 Show.gif 이미지 경로이며, - 버튼은 Hide.gif 이미지 입니다. 그리고 버튼이 위치한 div 태그에 class 을 지정하여 스타일이 적용되도록 하였습니다. class 명은 cpHeader 입니다. 그리고 + 버튼으로 인해 보여지게 될 panel 들은 asp:panel 서버컨트롤의 속성에 class 를 지정하였습니다.이는 panel 이 랜더링 되면 div 라는 html 태그가 되기 때문입니다.
CSS 설정은 아래와 같습니다.
<style type="text/css">.cpHeader{color: white;background-color: #719DDB;font: bold 11px auto "Trebuchet MS", Verdana;font-size: 12px;cursor: pointer;width:450px;height:18px;padding: 4px;}.cpBody{background-color: #DCE4F9;font: normal 11px auto Verdana, Arial;border: 1px gray;width:450px;padding: 4px;padding-top: 7px;}</style>
이제 CSS 도 설정되었으니 자바스크립트 기술을 사용하여, 처음에는 모든 PANEL 을 감추고, + 버튼을 선택하면 +1 증가 구현으로 보이도록 하고, - 버튼은 -1 증가를 하여 감추도록 할것입니다.
$(document).ready(function() {
var pan = $(".cpBody").hide(); //cpBody 의 css 로 정의된 div 는 초기화로 전부 감춘다.
var showNext = 0;
$("#btnShow").click(function() {
if (showNext < pan.length) {
$(pan[showNext++]).slideDown(); //인덱스로 접근하여 슬라이드를 내린다.
}
});
$("#btnHide").click(function() {
if (showNext > 0) {
$(pan[showNext - 1]).slideUp(); //인덱스로 접근하여 슬라이드를 올린다.
showNext--; //올리면서 -1 을 감소시켜 그 이전의 panel 또한 접근할 수 있다.
}
});
});
버튼에 대한 클릭이벤트를 설정하였고, btnShow 라는 버튼을 선택하면 panel 개수만큼 제한하여 오류 발생을 제어하였고,
+ 버튼을 선택할때 마다 showNext 변수값은 +1씩 증가되게 됩니다. 이 +1씩 증가되는 변수값을 응용하여 슬라이드를 제어할 수 있습니다. sildeDown() 메소드를 이용하여 해당 div 를 보이도록 합니다. sildeUp() 메소드는 panel 을 하나씩 감추는 역할을 합니다.
[그림 1 : 초기화 화면] [그림 2 : + 버튼선택 화면] [그림 3 : + 버튼 다시 선택시] [그림 4 : - 버튼 선택시 화면]
위의 예제는 그리 어렵지 않을거라 생각이 들고요. 더 많은 기능이 있으니 jQuery 를 협업에서 많은 이용하시기 바랍니다.
감사합니다.
posted by 심재운(shimpark@gmail.com)
