TabContainer 사용하기

2007. 12. 23. 10:45 개발언어/ASP.NET

http://drum-83.tistory.com/category/ASP.NET%20AJAX?page=2
퍼왔습니다.

TabContainer

 

Tab를 이용한 기능을하는 것들은 많이 봐았을 것입니다. , 한 화면에서 여러 개의 컨텐츠을 그룹단

위로 지어 표현할 때에는 Tab만큼 표현하기 좋은 것은 없기 때문일 것입니다~!

이번에는 AJAX Control 중에서 TabContainer 컨트롤을 이용해서 간단한 예제를 만들어 보도록 하겠습니다.

~ 그럼 만들어 볼 예제는 아래 그림과 같습니다. 짜짠....^^;;

 

1. 그림 (Daum 메인 화면 중에서..)

 

사용자 삽입 이미지

사용자 삽입 이미지
 

위 그림과 같이 스포츠 부분과 연애 부분의 기사내용을 TabContainer 컨트롤을 이용해서 간단하게

만들어 보도록 하겠습니다.

 

그럼 먼저 Visual Studio 2008(VS2008)로 웹 프로젝트 하나를 만들어 주세요~^^ ~! 그리고 이

 컨트롤은  AJAX ControlToolkit 1.0 에서 지원이 되는 컨트롤 입니다. 혹시 VS2008이 아직 안깔려

있으시다면 VS2005로 테스트해 보셔도 상관은 없습니다.  VS2005 AJAX Control를 테스트 하시

려면 기본적으로 설치해야 하는 것들이 있다는 거 알고 계시죠~^^;;

혹시 모르시는 분들은 제가쓴 "AJAX 방명록 만들기[2]"편 제일 위를 읽어 보시고 필료한 파일을

다운로드 해서 설치하세요~^^

 

이제 준비 되셨으리라 생각이 됩니다. 아래 그림은 VS2008 도구상자에서 본 TabContainer 컨트롤과

VS2005에서 본 TabContainer 컨틀로 입니다.

 

2.그림

사용자 삽입 이미지

 

 

 VS2005에서는 Tab관련해서 컨트롤이 두개로 나누어저 보이는 것을 볼 수 있습니다. 물론 VS2008

는 사라진것이 아니지요..그냥 하나로 통합(?!)되었다고 표현해야 하나...VS2005에서와 쓰는 방법과

달라진것 없는것 같아요~ 그저 도구상자에서 컨트롤이 하나로 보인다는거...정도...^^;;

 

암튼 잡소리는 그만 하고 코드로 만들어 보도록 하겠습니다.

페이지를 열어 두시고 AJAX Control를 사용하기 위해 ScriptManager를 생성해 줍니다. 그리고 나서

TabContainer 컨트롤을 도구상자에서 던저 넣어 주세요~ 물근 던저 넣으셔도 되고 직접 손으로

작성하셔도 됩니다.^^ 이런것도 귀찮아 하시는 분들을 배려해서 제가 코드를 넣어(!?)줄 수는 없고

그냥 써 드리겠으니 복사해서 쓰세요~^^(넘 썰렁 개그인가요..)

 

/////////////////////////////////////////////////////////////////////////////////////////

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"

TagPrefix="AjaxControl" %>

 

중간 생략

 

<asp:ScriptManager ID="ScriptManager01" runat="server">

</asp:ScriptManager>

 

<AjaxControl:TabContainer ID="TabContainer1" runat="server" Width="500" Height="170" ActiveTabIndex="0">

</AjaxControl:TabContainer>

/////////////////////////////////////////////////////////////////////////////////////////

 

위 코드에서 Register aspx 페이지 제일 위에 넣어 주는 센스...잊지마세요~

 

이렇게 코드가 생겼습니다. 그럼 TabContainer 컨트롤안에  TabPanel이 있어야 겠지요~ VS2005

에서는 도구상자에 있으니깐 던저 넣으셔도 되고요 손으로 직접 쓰셔도 됩니다. VS2008 또한 손으로

직접 쓰셔도 됩니다. 그냥 TabContainer 컨트롤 안에서 "<" 찍으셔도 TabPanel이라고 나타날 거예

~! Visual Studio의 엄청 편리한 인텔리센스 기능...^^

TabPanel를 통해서 Tab의 갯수가 정해 집니다. 그러니 필요한 만큼만 만드시면 되겠네요~

그럼 간략하게 TabContainer 컨트롤과  TabPanel 컨트롤의 속성을 아래 표로 보시지요~!

 

TabContainer 컨트롤 속성

 

 속성

 설명

 OnActiveTabChanged

 포스트백후 탭이 변경되었을 경우 서버측에서 발생하는 이벤트

 ActiveTabIndex

 첫번째로 보여질 탭의 지정

 BackColor

 배경색을 지정

 BorderColor

 테두리 색을 지정

 BorderStyle

 테두리 스타일을 지정

 BorderWidth

 테두리 너비을 지정

 CssClass

 컨트롤에 적용될 CSS클래스명 지정

 Enabled

 컨트롤 활성화된 상태지정

 ScrollBars

 TabContainer 본문에 스크롤바를 표시할 것인지를 설정

 Width

 탭의 넓이를 지정

 Height

 탭의 높이를 지정

 

TabPanel 컨트롤 속성

 

 속성

 설명

 HeaderText

 탭 부분에 보여질 문자지정

 HeaderTemplate

 (Header) 부분의 보여질 템플릿

 ContentTemplate

 본문 내용을 템플릿

 OnClientClick

 클라이언트 클릭 이벤트의 스크립트함수 이름을 지정

(TabContainer 컨트롤과 TabPanel 컨트롤의 속성이 비슷한것도 있습니다. 나중에 쓰면서 한번

확인해 보세요^^; )

 

저는 두개의 TabPanel를 만들었습니다. 하나는 스포츠 기사 내용이 들어 갈 것이고요 , 하나는

연애기사가 들어 갈 것입니다. 소스는 아래와 같습니다.

 

/////////////////////////////////////////////////////////////////////////////////////////

<AjaxControl:TabContainer ID="TabContainer1" runat="server" Width="500" Height="170" ActiveTabIndex="0">

<%-- 연애 뉴스 --%>

<AjaxControl:TabPanel ID="TabPanel01" runat="server" HeaderText="연애인">

<ContentTemplate>

</ContentTemplate>

</AjaxControl:TabPanel>

<%-- 스포츠 뉴스 --%>

<AjaxControl:TabPanel ID="TabPanel02" runat="server" OnClientClick="TabPanulClick">

<HeaderTemplate>스포츠</HeaderTemplate>

<ContentTemplate>

</ContentTemplate>

</AjaxControl:TabPanel>

</AjaxControl:TabContainer>

/////////////////////////////////////////////////////////////////////////////////////////

 

이렇게 해서 두개의 탭이 만들어 졌습니다. 두개의 텝이 조금 다르게 보이시나요~! 코드상으로

연애 뉴스 탭쪽은 HeaderText 속성 사용해서 탭부분에 문자를 넣어 봤고요두번째 스포츠 뉴스쪽에

HeaderTemplate 속성을 이용해서 문자를 넣어 봤습니다. 그리고 OnClientClick속성을 이용해서

스크립트 함수를 호출하도록 해봤습니다 . 스크립트 함수는 아주 간단합니다. 그냥 메세지 출력입니다

아래는 스크립트 함수소스 코드 입니다.

 

/////////////////////////////////////////////////////////////////////////////////////////

<script type="text/javascript">

function TabPanulClick()

{

alert("이벤트 발생");

}

</script>

/////////////////////////////////////////////////////////////////////////////////////////

 

이렇게 하면 스포트 메뉴탭을 클릭하면 메세지 박스에 나타나겠지요~^^;;아주 허접한 이벤트 입니다.

이제 ContentTemplate안에 내용을 채워 주면 되겠네요~^^ 원하시는 대로 한번 꾸며 보세요~^^

저는 위에서 보여 주었던 그림 그대로 한번 만들어 보도록 하겠습니다. 이미지들을 다운로드 받아

두었구요...코드로 짜면 되겠지요~

코드는 아래와 같습니다.

 

/////////////////////////////////////////////////////////////////////////////////////////

<%-- 연애 뉴스 --%>

<AjaxControl:TabPanel ID="TabPanel01" runat="server" HeaderText="연애인">

<ContentTemplate>

<div id="content01">

'뉴하트' 조재현, 순수하고 정의로운 의사 조금 거칠면 안되나요<br />

'인순이는 예쁘다' 사랑받는 이유 I '대조영' 걸사비우 생존 당연한가<br />

'케로로' 쓴 모자 2차대전 일본군모 I 신동엽·유재석·강호동 올해 성적표<br />

<hr style="width: 98%;" />

<div id="subContent01" style="width: 110px; height: 50px;">

<img src="images/img01.gif" alt="너무마른 고아라" style="width: 95%; height: 95%;" />

<br />&nbsp;앙상한 고아라<br />마른줄 알았지만..

</div>

<div id="subContent02" style="width: 110px; height: 50px; position: absolute; top: 111px;

left: 135px;">

<img src="images/img02.gif" alt="한지혜 다리" style="width: 95%; height: 95%;" /><br />

&nbsp;한지혜 이기적인<br />다리란 이런것!

</div>

<div id="subContent03" style="position: absolute; top: 111px; left: 250px;">

- [텔존] 연예계 결혼한 올드미스들은?<br />

- 단발머리 자른 성유리, 그래도 예쁘네<br />

- 김민정, 일본배우 아오이 유우와 직찍<br />

- 금발로 돌아온 브리트니, 뱃살은 어쩔<br />

- 이효리 스타일 결정체, LA 사진 모음<br />

</div>

</div>

</ContentTemplate>

</AjaxControl:TabPanel>

 

<%-- 스포츠 뉴스 --%>

<AjaxControl:TabPanel ID="TabPanel02" runat="server" OnClientClick="TabPanulClick">

<HeaderTemplate>스포츠</HeaderTemplate>

<ContentTemplate>

<div id="content02">

4년계약 이승엽, 왜 연봉 깎였을까? I 홍성흔 트레이드, 매력없는 이유<br />

ㅁ 편파판정 핸드볼 '다시 치른다' I 맨유가 박지성을 기다리는 이유<br />

ㅁ 오릭스, 리오스 영입 포기 선언 I 조정웅-안연홍 커플, 내년 6월 결혼<br />

<hr style="width: 98%;" />

<div id="subContent04" style="width: 110px; height: 50px;">

<img src="images/img03.gif" alt="김연아 웃음" style="width: 95%; height: 95%;" /><br />

&nbsp;김연아 일본서,<br />샤라포바와 동급

</div>

<div id="subContent05" style="width: 110px; height: 50px; position: absolute; top: 111px;

left: 135px;">

<img src="images/img04.gif" alt="소렌스탐" style="width: 95%; height: 95%;" /><br />

&nbsp;소렌스탐, 17<br />대회만에 첫 승

</div>

<div id="subContent06" style="position: absolute; top: 111px; left: 250px;">

- 'KIA' 서재응의 새로운 도전<br />

- 국가대표 선수들 "숙소달라"시위

<br />

- 홍성흔 트레이드가 매력없는 이유<br />

- 더 선 선정 최고의 프리키커 top10<br />

- 김연아, 전설의 길로 날개 편다<br />

</div>

</div>

</ContentTemplate>

</AjaxControl:TabPanel>

/////////////////////////////////////////////////////////////////////////////////////////

 

위 코드는 따로 설명이 필요 없는 아주 단순하게 짜본것입니다. 눈으로 잠깐 보셔도 아실수 있는

내용이라 생각이 되는 군요~^^ 혹시 따로 만들기 귀찮은 분은 제가 만들이 허접한 코드를 복사해서

붙어 넣으세요..단 이미지파일경로를 변경해 주는 센스 잊지마세요~

 

자 그럼 어디 잘 실행이 된는 지 확인해 보도록 하겠습니다.

 

4.그림(처음실행)

사용자 삽입 이미지
 

 

5.그림(스포츠탭 클릭 이벤트 발생)

사용자 삽입 이미지

 

6.그림(스포츠 내용)

사용자 삽입 이미지

 

 좀 비슷하게 만든것 같지요~^^;;; 아닐수도 있지만...제 눈에는 비슷하네요...ㅋㅋ(자기만족...ㅋㅋ)

이렇게해서 간단하게 TabContainer 컨트롤에 대해서 알아 봤습니다.

혹시 참고될만 한 사이트를 원하신다면 아래 주소를 참고 하세요~^^;;

 

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Tabs/Tabs.aspx