블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday



전에 제가 올린 글 중에 [AJAX Control] TabContainer Control 써보기~!라는 강좌가 있었는데요. 이번에는 그 TabContainer ControlStyle을 넣어 보도록 하겠습니다.

 

먼저 CSS Class를 지정해 주기에 몇 가지 규칙을 알아야 해요. 아래 그림과 표를 보시면 이해가 빠르실 것 같네요.

 

사용자 삽입 이미지


CSS Class Names

설명

ajax__tab_header

Tab 영역 전체 스타일 지정.

ajax__tab_body

Content 영역 스타일 지정.

ajax__tab_active

현재 선택된 Tab의 스타일 지정.

ajax__tab_tab

Tab의 텍스트 관련 스타일 지정.

ajax__tab_inner

Tab의 왼쪽 영역 스타일 지정.

ajax__tab_outer

Tab의 오른쪽 모서리 영역 스타일 지정.

ajax__tab_hover

마우스 Over시 스타일 지정.

 

자 그럼 이제 아래 style을 지정한 코드를 보도록 하겠습니다.

 

CSS Code

<style type="text/css">

.ajax__myTab .ajax__tab_header

        {

            font-family: verdana, tahoma, helvetica;

            font-size: 11px;

            border-bottom: solid 1px #999999;

        }

        .ajax__myTab .ajax__tab_outer

        {

            padding-right: 4px;

            height: 21px;

            background-color: #C0C0C0;

            margin-right: 2px;

            border-right: solid 1px #666666;

            border-top: solid 1px #aaaaaa;

        }

        .ajax__myTab .ajax__tab_inner

        {

            padding-left: 3px;

            background-color: #C0C0C0;

        }

        .ajax__myTab .ajax__tab_tab

        {

            height: 13px;

            padding: 4px;

            margin: 0;

        }

        .ajax__myTab .ajax__tab_hover .ajax__tab_outer

        {

            background-color: #cccccc;

        }

        .ajax__myTab .ajax__tab_hover .ajax__tab_inner

        {

            background-color: #cccccc;

        }

       

        .ajax__myTab .ajax__tab_hover .ajax__tab_tab

        {

        }

        .ajax__myTab .ajax__tab_active .ajax__tab_outer

        {

            background-color: #fff;

            border-left: solid 1px #999999;

        }

       

        .ajax__myTab .ajax__tab_active .ajax__tab_inner

        {

            background-color: #fff;

        }

        .ajax__myTab .ajax__tab_active .ajax__tab_tab

        {

        }

        .ajax__myTab .ajax__tab_body

        {

            font-family: verdana, tahoma, helvetica;

            font-size: 10pt;

            border: 1px solid #999999;

            border-top: 0;

            padding: 8px;

            background-color: #ffffff;

        }

    </style>


위에 정리한 표와 함께 보시면 코드 이해하시는데 무난할 거라 생각이 드네요!  이제 Class Name을 지정해 주어야 지요. 역시 말보다는 코드로 보시는게 빠르실 듯 하네요.

HTML Code

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

            ActiveTabIndex="0" CssClass="ajax__myTab">

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

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

                <ContentTemplate>

                    <div id="content01">

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

                        <br />

                        ... 내용 생략 ...

                </ContentTemplate>

            </AjaxControl:TabPanel>
</AjaxControl:TabContainer>


위 코드에서 보시면 TabContainerCssClass 속성에 "ajax__myTab"이라고 지정해 준것을 보실수 있을 거예요. 정말 사용하기 간단하지요. 아래 그림은 제가 간단하게 만들어본 예제 예요. 소스도 같이 올려 놓을 게요.
사용자 삽입 이미지


Posted by happydong
, |



UpdatePanelAnimationExtender

 

 ASP.NET AJAX 컨트롤에 관심이 있는 분이라면 한번쯤 써 봤을 컨트롤인 UpdatePanelAnimation 효과를 주게 하는 컨트롤입니다. UpdatePanel에 관련해서는 정말 많이 있으므로 여기서 다룰 내용이 조금 미흠 하다 싶으시면 바로 네이버, 구글 등 에서 자료를 찾아 보시면 되겠습니다~^^;

~그럼 제가 이 컨트롤을 이용해서 무엇을 만들어 볼 것이냐...?? 궁금하신가요~^^;; ..간단한 포트 갤러리..(!?)를 만들어 보려고 합니다. 여러번 말하는 것 보다는 한번 눈으로 보는 것이 좋겠지요~^^;;그래서 준비했습니다. 아래그림들.... 한번 보도록 하시지요~

 

1. 그림 (실행 화면)

 

사용자 삽입 이미지

 

위 그림이 처음 로드 된 모습입니다. 이미지 아래 Checkbox 3개 있고 버튼이 하나 있습니다. , Checkbox에 체크된 효과에 맞게 Animation이 일어나는 것이지요~! 아래 그림들을 계속 보도록 하겠습니다.

 

2.그림 (버튼을 클릭 Animation효과에 맞게 실행되는 모습)

 

사용자 삽입 이미지

 

3.그림(Animation효과에 맞게 실행되는 모습 2)

 

사용자 삽입 이미지

 

 

4.그림(Animation 효과후 다른 사진)

 

사용자 삽입 이미지

 

 

이런 식으로 해서 실행이 됩니다~^^;

예제 사진으로 계속해서 김연아 선수를 모델로 삼고 있는데요. 별 뜻은 없습니다~^^;; 있나..ㅋㅋ 요즘 뉴스에 많이 나오잖아요~ 어린 나이에 세계에 이름을 날리고..~~정말 부러운 모습입니다~^^;; 이 사진들은 네이버에서 예제로 할 만한 사진을 찾다가 기사를 보고... 그러다가 김연아 선수의 미니 홈페이지에 들여서 스크랩해서 가져 왔습니다~^^;; 혹시  김연아 선수가 네이버에서 검색을 하다가 제 블러그에 올 확율은 몇 퍼센트일까요~^^;;ㅋ 이뿐 사진으로 제 예제에 도움이 되준 김연아 선수 감솨 합니다~

그럼 계속해서 내용을 이어가도록 하겠습니다.

자 그럼 이제 VS2008 또는 VS2005 를 실행을 시켜서 웹 프로젝트를 하나 만드세요~^^VS2005로 만드실 분들은 제가 늘 애기하지만 그냥 Web프로젝트를 만들면 안되는 거 아시죠~^^;; 혹시 프로젝트를 어떻게 생성해야할지 모르는 분들 은 "ASP.NET AJAX 프로젝트 만들기 준비사항"를 참고 하시길 바랍니다~^^ 이제 코드로 보도록 하겠습니다.

 

 UpdatePanel Code (aspx페이지)

 김연아선수 포토 앨범 보기~!^^<br /><br />

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

<div style="margin-bottom:10px; width:500px; height:600px;">

<div style="border:dashed 1px #222222;">

<div id="AnimationContainer" style="background:#959695;">

<asp:UpdatePanel ID="UpPanel01" runat="server">

<ContentTemplate>

<asp:Image runat="server" ID="imgContent" ImageUrl="~/UpdatePanelAnima/images/img01.jpg" style="padding:1%; width:98%; height:560px;" />

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="btnimageChange" EventName="Click" />

</Triggers>

</asp:UpdatePanel>

</div>

</div>

<asp:Button ID="btnimageChange" runat="server" OnClick="ChangeImageClick" Text="다음사진"/>

 

위 코드는 그냥 UpdatePanel 컨트롤을 이용해서 페이지에 깜빡이 없이 이미지를 바꾸게 하는 코드 입니다. 그리고 위해서 조금 중요한 부분은 AnimationContainer id부분입니다. Div 안에서 애니메이션이 일어나기 때문에 id를 설정해주는 것이 중요합니다. 그럼 여기서 잠깐 UpdatePanel에 대서 아주 짧게 알아보도록 하겠습니다. 짧게 알아보는 이유인 즉 저 또한 공부중 이라... 2%...(더일수도 있고요..ㅋㅋ)부족합니다...ㅋㅋ

 

UpdatePanel : 포스트백에 의해 전 페이지를 새로고침 하는 것 대신 페이지 중 선택된 일부분만 새로 고침을 할 수 있습니다. 즉 부분 업데이트가 가능하다는 이야기지요. 다들 알고 있는 내용인 듯 하네요!!

 

 속성

 설명

 ContentTemplate

  업데이트가 필요한 Content 들을 정의 합니다.

 Triggers

 트리거는 패널을 업데이트하기 위해 유발시키는 포스트백컨트롤과 이벤트를 정의 합니다. UpdatePanel 밖에 버튼 컨트롤을 이용해서 패널을 업데이트 하기위해서 사용하지요.

 트리거는 <Triggers>요소안에 <asp:AsyncPostBackTrigger>로 정의되며, 트리거의 이벤트는 선택적입니다. (이벤트가 명시되지 않았을때는 컨트롤의 기본 이벤트가됨)

 

위 표에서의 내용을 잠깐 테스트 해보세요~^^ 제가 위에 올린 소스를 다들 입력 하셨으리라 생각이 됩니다~^^(이미지 경로는 알맞게 세팅해 주세요~^^;;) 그럼 이제 한번 실행을 시켜 보세요~ 어떻게 나오나요? 저하고 똑같이 하셨다면 회색 배경에 이미지가 보일 것이고 아래 버튼이 하나 있겠군요~그리고 클릭하고 깜빡이 없이 사진이 변화 될 테고요...맞죠~^^;; 현재 위 버튼은 UpdatePanel 밖에서 만들어져 있고 Trigger를 통해서 버튼의 이벤트가 정의되고 있네요. 그럼 위 버튼 바로 밑에 임의로 버튼을 하나 만들어 보세요~아래 코드 추가...

 

<asp:Button ID="testbtn" runat="server" Text="테스트" />

 

위 버튼은 이벤트를 정의 하지 않았습니다. 그럼 기본적으로 Click 이벤트가 발생하겠지요. 그리고 이 버튼은 트리거에도 정의되어 있지 않습니다. 자 그럼 이 상태에서 한번 실행을 시켜서 처음에 만들었던 버튼을 클릭해보고 테스트버튼을 한번 클릭해 보면... 차이가 나겠지요^^ 둘 다 UpdatePanel 밖에 존재하지만 트리거에 정의 되지 않은 버튼을 클릭하면 전체가 페이지가 로드 되는 것을 볼 수 있습니다.

자 이제 대충 감을 잡았을 것  같군요~!

그럼 테스트 버튼은 지우던지 마시던지 마음대로 하시고요~이제는 UpdatePanelAnimationExtender 컨트롤과 Checkbox 컨트롤을 만들어 보도록 하겠습니다. 버튼 컨트롤 위에 Checkbox를 만들 것 이므로 아래 코드를 버튼 컨트롤 위에 작성해 주세요~^^;;제 말이 꼭 법은 아니니깐 마음대로 하셔도 되요...(약해지는 모습...)

 

 Checkbox Code (aspx페이지)

 <input id="Ani_fade" type="checkbox" checked="checked" />

<label for="Ani_fade">깜빡효과</label>

<input id="Ani_Collapse" type="checkbox" checked="checked" />

<label for="Ani_Collapse">겹침효과</label>

<input id="Ani_color" type="checkbox" checked="checked" />

<label for="Ani_color">색상효과</label><br />

 

자 위의 코드처럼 HTML 코드로 체크박스를 만들었습니다. 이제 UpdatePanelAnimationExtender 컨트롤 생성하도록 하겠습니다.

 

UpdatePanelAnimationExtender Code

 <cc1:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server"

BehaviorID="anima" TargetControlID="UpPanel01">

<Animations>

    <%-- 업데이트 중 일 때 이벤트정의  --%>

<OnUpdating>

<Sequence>

<%-- Panel 높이 지정--%>

<ScriptAction Script="var b = $find('anima'); b._originalHeight = b._element.offsetHeight;" />

                       

<%-- 모든 Control 비활성화 --%>

<Parallel duration="0">

<EnableAction AnimationTarget="btnimageChange" Enabled="false" />

<EnableAction AnimationTarget="Ani_color" Enabled="false" />

<EnableAction AnimationTarget="Ani_Collapse" Enabled="false" />

<EnableAction AnimationTarget="Ani_fade" Enabled="false" />

</Parallel>

<StyleAction Attribute="overflow" Value="hidden" />

                       

<%-- 체크가 되어 있는것들의 행위 수행 --%>

<Parallel duration=".25" Fps="30">

<Condition ConditionScript="$get('Ani_fade').checked">

<FadeOut AnimationTarget="AnimationContainer" minimumOpacity=".2" />

</Condition>

<Condition ConditionScript="$get('Ani_Collapse').checked">

<Resize Height="0" />

</Condition>

<Condition ConditionScript="$get('Ani_color').checked">

<Color AnimationTarget="AnimationContainer" PropertyKey="backgroundColor" EndValue="#FF0000" StartValue="#959695" />

</Condition>

</Parallel>

</Sequence>

</OnUpdating>

  <%-- 업데이트 후 일 때 이벤트정의 --%>

<OnUpdated>

<Sequence>

<%-- 체크가 되어 있는것들 행위 수행 --%>

<Parallel duration=".25" Fps="30">

<Condition ConditionScript="$get('Ani_fade').checked">

<FadeIn AnimationTarget="AnimationContainer" minimumOpacity=".2" />

</Condition>

<Condition ConditionScript="$get('Ani_Collapse').checked">

<%-- 기억된 높이 지정 --%>

<Resize HeightScript="$find('anima')._originalHeight" />

</Condition>

<Condition ConditionScript="$get('Ani_color').checked">

<Color AnimationTarget="AnimationContainer" PropertyKey="backgroundColor" StartValue="#FF0000" EndValue="#959695" />

</Condition>

</Parallel>

                       

<%-- 모든 Control 활성화 --%>

<Parallel duration="0">

<EnableAction AnimationTarget="Ani_fade" Enabled="true" />

<EnableAction AnimationTarget="Ani_Collapse" Enabled="true" />

<EnableAction AnimationTarget="Ani_color" Enabled="true" />

<EnableAction AnimationTarget="btnimageChange" Enabled="true" />

</Parallel>                           

</Sequence>

</OnUpdated>

</Animations>

</cc1:UpdatePanelAnimationExtender>

 

~ 코드가 길지요~^^;; 그래서 조금 복잡해 보일 것 같군요~! 근데 코드를 잘 보시면 크게 두 개의 애니메이션으로 나눌 수 있는데요. 처음은 업데이트 중 일 때 와 업데이트 후...이렇게 나눌 수 있겠네요 그리고 위 코드는 스크립트와 Style를 이용해서 효과를 지정한 것 입니다. Parallel 객체의 duration속성을 지정하므로 써 해당 시간이 됐을 때 일어날 효과를 지정하는 것이지요~! ~그럼 이제 버튼이벤트의 비하인트 코드를 보도록 하겠습니다.

 

 cs페이지 Code

 private int num = 1;

protected void Page_Load(object sender, EventArgs e)

{

// 세션값 지정

if (Session["Number"] != null)

{

num = int.Parse(Session["Number"].ToString());

}

else

{

Session["Number"] = num;

}

}

 

protected void ChangeImageClick(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(300);

num++;

if (num == 9)

{

num = 1;

}

imgContent.ImageUrl = string.Format("~/UpdatePanelAnima/images/img0{0}.jpg", num);

Session["Number"] = num;

}

 

 

위 코드를 잠깐 설명하자면 상태 유지를 위해 세션객체를 만들어 봤습니다. 코드에서도 살짝 눈치 채셨겠지만 저는 따로 DB를 만든 것이 아닙니다. 예제로 만든 것이므로 데이터 베이스하고 연동을 않했구요 그냥 Images폴더를 만들어서 이미지 경로만 바꿔준 것입니다. 그리고 이미지파일들의 이름은 img01,img02...등등으로 되어 있고요 뒤 숫자만 바꿔가면서 이미지를 바꾸는 것이지요^^ 아주 허접 한 예제인가요..ㅋ죄송 합니다. 그냥 볼 때는 그럴 사 했는데...이렇게 까보고 나니깐..허접 하지요..ㅋㅋ^^;; 아무튼 코드 짜는 것은 개발자들 마다 다르기 때문에 더 좋은 방법이 있다면 그 방법으로 짜셔도 무관 합니다~^^그리고 저도 좀 알려주세요~ 늘 입버릇처럼 말하지만 저 또한 초보 개발자이고 공부 중에 있으니 공유해주세요~^^ㅎㅎ 세션객체는 왜 쓴 것일까...이미지를 바꿀 변수의 상태유지를 위해 만든 것 입니다. 버튼을 클릭하면 먼저 포스트백이 일어나고 난 뒤에 버튼 이벤트가 일어나기 때문에 위에서 지정한 변수는 항상 초기값을 갖게 됩니다. 그래서 저 같은 경우는 그냥 세션객체를 만든 것이지요.

자 그럼 여기까지 만들었다면 이제 실행을 해서 확인해 보세요~ 위 그림들과 같이 잘 되나요~ 혹시 더욱 자세하 내용을 보고 싶으시다면 아래 링크를 참고 하세요~

 

 - UpdatePanelAnimation 관련

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

 

 

참 제가 쓴 글을 한번 읽어 볼 때면 웃음는 모습이 많은 것 같네요~ 글도 사람 성격에 따라 써지나 봅니다. 혹시 이런 웃는 모습이 불편하다면 말해주세요~그리고 제 내용이 부족한 부분은 지적부탁드립 니다~!!(오타도 좋습니다) 그리고 늘 제 블로그에 오시는 분들에게 조금이나만 도움이 됐으면 좋겠습니다~^^ 그럼 오늘도 즐공 하시길....^^


아래는 제가 만든소스 코드 입니다. 참고 하세요~^^


 

Posted by happydong
, |



TabContainer
 

Tab를 이용한 기능을 하는 것들은 많이 보았을 것입니다. , 한 화면에서 여러 개의 컨텐츠을 그룹단위로 지어 표현할 때에는 Tab만큼 표현하기 좋은 것은 없기 때문일 것입니다~! 이번에는 AJAX Control 중에서 TabContainer 컨트롤을 이용해서 간단한 예제를 만들어 보도록 하겠습니다. ~ 그럼 만들어 볼 예제는 아래 그림과 같습니다. 짜짠....^^;;

 

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

 

사용자 삽입 이미지

사용자 삽입 이미지
 

 

위 그림과 같이 스포츠 부분과 연애 부분의 기사내용을 TabContainer 컨트롤을 이용해서 간단하게 만들어 보도록 하겠습니다. 그럼 먼저 Visual Studio 2008(VS2008)로 웹 프로젝트 하나를 만들어 주세요~^^ ~! 그리고 이 컨트롤은  AJAX ControlToolkit 1.0 에서 지원이 되는 컨트롤 입니다. 혹시 VS2008이 아직 않 깔려 있으시다면 VS2005로 테스트해 보셔도 상관은 없습니다.  VS2005 AJAX Control를 테스트 하시 려면 기본적으로 설치해야 하는 것들이 있다는 거 알고 계시죠~^^;; 혹시 모르시는 분들은 제가쓴 "ASP.NET AJAX 프로젝트 만들기 준비사항"를 읽어 보시고 필요한 파일을 다운로드 해서 설치하세요~^^

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

 

2.그림

 

사용자 삽입 이미지

 

 

 VS2005에서는 Tab관련해서 컨트롤이 두 개로 나눠어저 보이는 것을 볼 수 있습니다. 물론 VS2008에는 사라진 것이 아니지요..그냥 하나로 통합(?!)되었다고 표현해야 하나...VS2005에서와 쓰는 방법과 달라진 것 없는 것 같아요~ 그저 도구상자에서 컨트롤이 하나로 보인다는 거...정도...^^;;

암튼 잡소리는 그만 하고 코드로 만들어 보도록 하겠습니다. aspx페이지를 열어 두시고 AJAX Control를 사용하기 위해 ScriptManager를 생성해 줍니다. 그리고 나서 TabContainer 컨트롤을 도구상자에서 던저 넣어 주세요~ 물론 던저 넣으셔도 되고 직접 손으로 작성하셔도 됩니다.^^ 이런 것도 귀찮아 하시는 분들을 배려해서 제가 코드를 넣어(!?)줄 수는 없고 그냥 써 드리겠으니 복사해서 쓰세요~^^(넘 썰렁 개그인가요..)

 

TabContainer Code (aspx페이지)

 <%@ 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를 만들었습니다. 하나는 스포츠 기사 내용이 들어 갈 것 이고요 , 하나는

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

 

 TabContainer , TabPanel Code (aspx페이지)

 <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 Code (aspx페이지)

 <script type="text/javascript">

function TabPanulClick()

{

alert("이벤트 발생");

}

</script>

 

이렇게 하면 스포츠 메뉴 탭을 클릭하면 메세지 박스에 나타나겠지요~^^;;아주 허접한 이벤트 입니다. 이제 ContentTemplate안에 내용을 채워 주면 되겠네요~^^ 원하시는 대로 한번 꾸며 보세요~^^ 저는 위에서 보여 주었던 그림 그대로 한번 만들어 보도록 하겠습니다. 이미지들을 다운로드 받아 두었고요...코드로 짜면 되겠지요~ㅋ 코드는 아래와 같습니다.

 

TabPanel Code (aspx페이지)

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

<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>

 

위 코드는 따로 설명이 필요 없는 아주 단순하게 짜본 것입니다. 눈으로 잠깐 보셔도 아 실수 있는 내용이라 생각이 되는 군요~^^ 혹시 따로 만들기 귀찮은 분은 제가 만든 허접한 코드를 복사해서 붙어 넣으세요..단 이미지파일경로를 변경해 주는 센스 잊지 마세요~ㅋ 자 그럼 어디 잘 실행이 되는지 확인해 보도록 하겠습니다.

 

3.그림(처음실행)

 

사용자 삽입 이미지

 

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

 

사용자 삽입 이미지

 

5.그림(스포츠 내용)

 

사용자 삽입 이미지

 

 좀 비슷하게 만든것 같지요~^^;;; 아닐수도 있지만...제 눈에는 비슷하네요...ㅋㅋ(자기만족...ㅋㅋ) 이렇게 해서 간단하게 TabContainer 컨트롤에 대해서 알아 봤습니다. 혹시 참고 될 만 한 사이트를 원하신다면 아래 주소를 참고 하세요~^^;;

 

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



아래는 제가 만든 소스 코드 입니다. 참고 하세요~^^

 

Posted by happydong
, |