|
Ajax Control Toolkit |
|
Accordion, DragPanelExtender |
|
|
@@AjaxControlToolkit 다운로드 및 적용방법!!
STEP1)
AjaxControlToolkit 다운로드 받는 곳: http://ajaxcontroltoolkit.codeplex.com/releases/view/43475
STEP2)
사이트로 들어가서 해당되는 파일을 다운로드를 받습니다. 그리고 파일이 압축되어 있는데 압축을 풀어줍니다.
 |
압축을 풀게 되면, AjaxControlToolkit.dll 파일과 Toolkit에 대한 샘플 코드를 볼 수 있는 압축파일을 확인 할 수 있습니다. |
STEP3)
그리고 Visual Studio 2008을 실행시고 웹사이트로 프로젝트 하나를 만듭니다.
 |
도구상자 툴에 가서 탭 추가를 클릭합니다. |
STEP4)
 |
그리고 탭이름을 AjaxControlToolkit으로 해줍니다. |
STEP5)
|
|
마우스 오른쪽 버튼을 클릭 후 항목 선택을 선택해 줍니다. |
STEP6)
-선택을 하게 되면 위에 스크린 화면처럼 도구 상자 항목 선택 창이 나옵니다. 그리고 찾아보기를 클릭합니다.
STEP7)
-처음 다운로드 받은 파일의 경로를 찾아가 AjaxControlTookit.dll 파일을 선택 후 열기를 클릭합니다.
STEP8)
|
|
|
-여러 컨트롤과 Extender가 추가된 것을 확인 할 수 있습니다.
지금부터 여러기능 중 Accordion과 DragpanelExtender를 사용해 보겠습니다.
그전에 컨트롤과 익스텐더의 차이점을 알아보겠습니다.
|
-컨트롤과 익스텐더는 어떻게 다를까? 컨트롤은 UI를 가지며 독립적으로 자신의 맡은 바 임무를 수행하는 컴포넌트입니다. 익스텐더는 UI를 가지지 않으며 다른 컨트롤에 접목시켜서 특정 기능을 사용할 수 있게 하는 기능 확장 컴포넌트입니다. |
@@DragPanelExtender 사용하기
-여러 컨트롤과 연계하여 사용하며, 페이지 내에서 자유롭게 드래그 앤 드롭할 수 있게 합니다.
-AJAX 확장 탭에서 ScriptManager 툴을 선택 후 디자인창에 드래그 합니다.
-표준탭에서 Calender 툴을 선택 후 ScriptManager와 마찬가지로 디자인창으로 드래그합니다. 그러면 위에 화면처럼 달력이 나타나게 됩니다.
 |
달력을 클릭하면 옆에 작은 화살표가 나타납니다. 화살표를 클릭하면, 자동서식과 Extender추가 작업이 있습니다. 일단 자동 서식을 클릭 후 원하는 모양으로 꾸민 후, Extender 추가를 클릭해보겠습니다. |
- 클릭하게 되면 밑에 화면처럼 마법사 창이 나오는데, DragPanelExtender를 클릭 후 확인 !!
-적용 후, 실행을 해보면 드래그가 가능하다는 걸 확인 할 수 있습니다. DragPanel은 달력뿐만 아니라, Panel이라든지 여러 컨트롤에도 적용이 가능합니다. 한번 실습해보세요.
@@Accordion 컨트롤 사용하기
- 이번에는 Extender가 아닌 컨트롤도 사용해보겠습니다. Accordion 컨트롤은 웹 서버 컨트롤로서, 다중 영역(Pane)을 출력하지만, 한번에 하나의 영역만을 보여주는 컨트롤입니다. 쉽게 말해, 악기인 아코디언과 마찬가지로 열렸다 접혔다 하는 모습을 생각하시면 됩니다.
-DragPanel과 마찬가지로 처음에는 ScriptManger 툴을 디자인 창으로 드래그합니다. Ajax를 사용할 경우는 처음에는 거의 ScriptManager툴을 사용한다고 생각하시면 됩니다.
-도구상자에서 Accordion툴을 사용하여 디자인 창에 드래그합니다.
 |
Accorion속성은 여러가지가 있습니다. 속성에 대한 설명은 밑에서 설명하겠습니다. 이번 실습에서는 가볍게 ContentCssClass, HeaderCssClass, FadeTransitions를 사용하겠습니다. 오류: True값으로 줘야 작동됩니다. |
-ACCORDION에 속성에 대한 설명입니다. 참고하시고 직접 실습해보세요.
|
속성 |
설명 |
|
selectedIndex |
초기에 보여질 AccordionPane 입니다. (서수로 지정하며, 0은 첫 번째를 의미합니다) |
|
HeaderCssClass |
헤더에 적용할 CSS 클래스명입니다. Accordion에 이 속성이 지정되면 그는 전체 Pane 헤더에 적용되며, AccordionPane에 지정되면 해당 Pane에만 스타일을 적용한다. |
|
HeaderSelectedCssClass |
선택된 헤더에 적용할 CSS 클래스명 |
|
ContentCssClass |
본문에 적용할 CSS 클래스명. |
|
FadeTransitins |
페이딩 변화 효과를 사용하려면 true |
|
TransitinDuration |
변화가 진행되는 밀리 초 단위의 시간 |
|
FramesPerSecond |
변화 애니메이션에 사용되는 초 당 프레임 수 |
|
AutoSize |
Accordion의 크기를 조절합니다. None은 기본 크기 그대로 유지합니다 Limit은 지정된 크기(height)보다 커지지 못하게 제한을 합니다 (커질 경우, 스크롤) Fill은 Pane의 크기에 맞게 실제 크기가 맞춰짐을 의미합니다 |
|
RequireOpenedPane |
열려져 있는 Pane의 헤더가 클릭될 때, 그 Pane이 닫히지 않게 합니다. |
|
SuppressHeaderpostbacks |
헤더 내부에 있는 요소의 클라이언트 측 클릭 이벤트가 일어나는 것을 막습니다. |
- AccordionPane 툴을 쓰기 위해 소스에 <Pane>을 추가 시킵니다. <Pane> </Pane>안에 AccordionPane툴을 추가 시켜 줍니다.
|
<cc1:Accordion ID="Accordion1" runat="server" ContentCssClass="content" HeaderCssClass="header" FadeTransitions="True"> <Panes> <cc1:AccordionPane ID="AccordionPane1" runat="server"> <Header>선문비트 1조 명단</Header> <Content>박중선 김정학 쿠니씨 성진용 송창은 설성훈</Content> </cc1:AccordionPane> <cc1:AccordionPane ID="AccordionPane2" runat="server"> <Header>선문비트 2조 명단</Header> <Content>김영찬 유익재 성종현 오두환 윤종수 강병창</Content> </cc1:AccordionPane> <cc1:AccordionPane ID="AccordionPane3" runat="server"> <Header>선문비트 3조 명단</Header> <Content>황성노 홍광수 강성길 이재욱 유해룡 이도호</Content> </cc1:AccordionPane> </Panes> </cc1:Accordion> |
- AccordionPane 툴은 <Header>와 <Content>로 이루어집니다. 위 소스처럼 추가하세요.
- 프로젝트를 실행시켜서, 선문비트 조 명단(헤더부분)을 클릭해보시면 클릭한 부분만 늘어나고 해당되지 않은 부분은 접혀지는 것을 확인할 수 있습니다.
- 이제는 Css클래스를 선언하여 좀더 변화 시켜 보겠습니다.
(참고로 Css클래스는 웹 문서의 전반적인 스타일을 미리 저장해둔 스타일시트입니다.)
|
<head runat="server"> <title>제목 없음</title> <style type ="text/css"> .header { background-color:Blue; cursor:pointer; border:thin white ridge; color:White; font-weight:bold; } .content { background-color:Silver; padding:5px; border:thin white inset; font-size:medium; } </style> </head> |
소스의 헤더부분(Accordion 헤더부분이 아닙니다)에 Css클래스를 선언해줍니다. 그리고 실행시켜 보시면..
위 화면처럼 변경이 되는 것을 확인할 수 있습니다.
'COMPUTER TECH > C# 실전자료' 카테고리의 다른 글
| 사용자 Extender 만들기 (1) | 2010.08.13 |
|---|---|
| ADO.NET을 이용한 데이터 접근 (0) | 2010.08.13 |
| Ajax Control Toolkit (0) | 2010.08.13 |
| 비동기 소켓 프로그래밍 (C#) (0) | 2010.08.13 |
| SqlParameter (0) | 2010.08.13 |
| Http method – get, post (1) | 2010.08.13 |
