@@AjaxControlToolkit 다운로드 및 적용방법!!

STEP1)

AjaxControlToolkit 다운로드 받는 곳: http://ajaxcontroltoolkit.codeplex.com/releases/view/43475



STEP2)

사이트로 들어가서 해당되는 파일을 다운로드를 받습니다. 그리고 파일이 압축되어 있는데 압축을 풀어줍니다.

 

STEP3)

그리고 Visual Studio 2008을 실행시고 웹사이트로 프로젝트 하나를 만듭니다.

 

STEP4)

 

STEP5)

 

STEP6)


-선택을 하게 되면 위에 스크린 화면처럼 도구 상자 항목 선택 창이 나옵니다. 그리고 찾아보기를 클릭합니다.

STEP7)


-처음 다운로드 받은 파일의 경로를 찾아가 AjaxControlTookit.dll 파일을 선택 후 열기를 클릭합니다.

STEP8)

-여러 컨트롤과 Extender가 추가된 것을 확인 할 수 있습니다.

지금부터 여러기능 중 Accordion과 DragpanelExtender를 사용해 보겠습니다.

그전에 컨트롤과 익스텐더의 차이점을 알아보겠습니다.

 

 

@@DragPanelExtender 사용하기

-여러 컨트롤과 연계하여 사용하며, 페이지 내에서 자유롭게

드래그 앤 드롭할 수 있게 합니다.

-AJAX 확장 탭에서 ScriptManager 툴을 선택 후 디자인창에 드래그 합니다.


-표준탭에서 Calender 툴을 선택 후 ScriptManager와 마찬가지로 디자인창으로 드래그합니다. 그러면 위에 화면처럼 달력이 나타나게 됩니다.


적용 후, 실행을 해보면 드래그가 가능하다는 걸 확인 할 수 있습니다. DragPanel은 달력뿐만 아니라,

Panel이라든지 여러 컨트롤에도 적용이 가능합니다. 한번 실습해보세요.

@@Accordion 컨트롤 사용하기

-DragPanel과 마찬가지로 처음에는 ScriptManger 툴을 디자인 창으로 드래그합니다. Ajax를 사용할 경우는 처음에는 거의 ScriptManager툴을 사용한다고 생각하시면 됩니다.

-도구상자에서 Accordion툴을 사용하여 디자인 창에 드래그합니다.

-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

헤더 내부에 있는 요소의 클라이언트 측 클릭 이벤트가 일어나는 것을 막습니다.