'ajax' 태그의 글 목록 (2 Page)

'ajax'에 해당되는 글 10건

2008.10.07 [AJAX Control] SliderExtender 써보기~!
2008.09.21 [AJAX Control] UpdatePanelAnimationExtender 써보기~!
2008.09.18 [AJAX Control] TabContainer Control 써보기~! 4

[AJAX Control] SliderExtender 써보기~!

프로그래밍/03.ASP.NET / 2008. 10. 7. 01:43

invalid-file
ㅁ SliderExtender

Slider Control를 이용한 사용자 편의성을 제공해주는 사이트 종종 봤을 거예요. 제가 가끔 보는 사이트인 조선닷컷은 편의성을 위해 글자의 크기를 조절할 수 있도록 해놨더라고요. (아래 그림 참고)

※ 위 사이트는 조선닷컴 사이트 입니다.

위 에서 빨간색으로 표시된 부분을 보시면 알수 있듯이 Slider Control를 이용해서 글자의 크기를 조절 할수 있게 만들져 있네요. 눈이 별로 좋지 않은 사람,혹은 어른신들을 고려해서 만든 기능이 아닐까 하는 생각이 드는군요^^
저는 ASP.NET AJAX Controls 중에서 SliderExtender Control를 이용해서 위와 같은 형식의 기능을 제공하는 예제를 만들어 볼 것이며, 여러가지 예제를 추가적으로 더 만들어 볼게요.

먼저, SliderExtender Control의 속성이 무엇이 있는지 알아야 겠지요.

속성	설명
Minimum	최소값 설정.
Maximum	최대값 설정
Decimals	소수점 자리 설정.
Steps	지정 숫자의 값 만큼 슬라이더 범위 이동.
Value	현재 슬라이더 지정 위치 값.(TextBox,Label의 Value(Text)속성에서 지정.)
EnableHandleAnimation	슬라이더 움직임 Animation 사용설정.
RailCssClass	슬라이더 레일 CSS Class 설정.
HandleCssClass	슬라이더 손잡이 CSS Class 설정.
HandleImageURL	슬라이더 손잡이 이미지로 표시 URL지정.
Length	수평/수직 슬라이더 너비를 지정.
BoundControlID	슬라이더의 값을 표시 할 TextBox 또는 Label 컨트롤 ID 지정.
RaiseChangeOnlyOnMouseUp	슬라이더에 Change이벤트가 있을 때, MouseUp 이벤트 발생인지, Mousedong 중 Slider때 이벤트발생인지 여부 설정.
TooltipText	마우스가 슬라이더 위에 올라왔을 때 슬라이더의 위치 값을 표시.(img태그 속성 중 alt과 비슷함.) [사용예] TooltipText=”지정값은:{0}” {0}안에 값이 표시됨.

간단하게 속성을 정리해 봤어요.
이제 조선닷컴과 같은 기능을 하는 예제를 만들어 볼게요. 먼저 아래 그림을 보도록 해요.

어떤가요? 조선닷컴의 기능과 비슷한 것 같은가요? 일단 비슷하다고 치고 어떻게 만들어 졌는지 한번 코드를 보도록 하겠습니다. 아래는 .aspx페이지의 코드 내용입니다.

.aspx페이지

<body>

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

<br />

<%-- 데이터 표시를위한 TextBox --%>

<asp:TextBox runat="server" ID="txtSlider_BoundControl" Visible="false"></asp:TextBox><br />

<%-- Slider가 될 TextBox --%>

<asp:TextBox runat="server" ID="txtSlider" onchange="DivStyle();" />

</div>

<div id="divContent01" style="width: 100%; font-size:10pt; height: 100%; background: #959695;

padding-top: 0px;">

-> 예비군 훈련 다녀왔습니다~

<br />

-> 두려움이 신속하게 몰려옵니다~ >_<

<br />

-> 안녕하세요 java 6개월 학원 수료후 신입으로 ...

<br />

-> SQL Server 2008 Business Co...

<br />

-> Wii 당첨.. 그러나

<br />

-> 저는 자바 개발자 입니다. 닷넷에 발을 들여 놓으...

<br />

-> AJAX 채팅을 만들어 봤습니다.

</div>

<%-- SliderControl --%>

<cc1:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="txtSlider"

BoundControlID="txtSlider_BoundControl"

Orientation="Horizontal"

EnableHandleAnimation="true"

RaiseChangeOnlyOnMouseUp="false"

TooltipText="슬라이드값{0}"

Minimum="9"

Maximum="30"

</form>

</body>

위 코드에서 유심히 볼 코드는 SliderExtender 컨트롤과 2개의 TextBox 컨트롤 이라고 생각이 되는 군요. SliderExtender 속성 중에서 BoundControlID 속성을 제가 txtSlider_BoundControl(TextBox컨트롤ID)으로 지정해두고 정작 TextBox컨트롤 Visible속성을 false로 지정해서 이상하다 생각 하실수도 있을 텐데요, 그 이유는 코드를 집적 작성하시면서 나중에 true로 바꾸셔서 슬라이드 값이 변경되는 것을 확인하시라고 지정한 거예요! 물론, 값을 볼 필요가 없다고 하시면BoundControlID 속성 지정하지 않아도 되요. 그리고 제가 지정한 속성은 위에 정리한 표를 비교해서 보시면 이해하기가 더 편하실거예요.

그럼 이제 두번째 TextBox컨트롤에 onchange이벤트를 호출하는 스크립트함수를 만들어 볼게요. 두번째 TextBox컨틀롤이 UI에서 슬라이드컨트롤로 변경되니깐 이쪽에 onchange이벤트를 줘야 겠지요.참고로 처음 슬라이드핸들의 위치를 지정하시고 싶으시면 TextBox컨트롤의 Text속성에 지정해 주면되요.
아래 스크립트 함수는 맨아래에 작성해 주세요.(즉, </html> 다음에요)

Script 함수

function DivStyle()

{

var txt = $get('<%= txtSlider.ClientID %>');

document.getElementById("divContent01").style.fontSize = txt.value +"pt";

}

</script>

스크립트를 아래쪽에 작성하는 이유는 사이트성능 향상을 위해서 좋고, head안에 넣으면 에러가 나기 때문이예요. 스크립트 안에 인라인수식으로 컨트롤 아이디를 지정하기 때문에 컨트롤이 생성되기 전에 스크립트가 먼저 실행되면 에러가 나겠지요.그래서 Body안 아니면,맨아래 부분에 넣어주는 것이 좋은데...저는 맨아래 부분에 작성해 보았어요.^^

이제 코드를 다 작성했네요. .cs페이지에는 따로 작성할 코드가 없어요.(필요에 따라 작성해서 만드세요) 여기까지 잘 따라서 하셨다면 잘 실행되리라 믿을게요~^^

이런식으로 해서 제가 몇가지 예제를 더 만들어 봤는데요. (아래 그림 참고)

위 예제는 아주 간단하게 만들수 있겠지요. 아까 위에서 스크립트코드에서 객체의 Style을 지정해 주었잖아요. fontSize에서 filter로만 변경해 주고 정확한 표현의 방식의 값이 들어가게 지정만 해주면 되요.

위 예제는 재미있겠지요. 빛의 3원색을 이용한 예제라고 할까요^^;; 빨강, 초록, 파랑 3색이 조합해서 색을 표현하는 예제지요. 이것도 스크립트로 작성해주는 부분이여서 그렇게 크게 어려울게 없을 거예요.

아래는 위 예제들을 합쳐 만든 예제입니다.

이렇게 만든사이트가 있으면 재미있지 않을까?^^
위 예제 소스들를 압축해서 올려 놓을 게요!!그리고 참고로 슬라이드 CSS 설정도 가능합니다. 즉, 슬라이드를 디자인 가능하다는 애기지요. 클릭 <- -여기 참고 하세요

Posted by happydong

, |

[AJAX Control] UpdatePanelAnimationExtender 써보기~!

프로그래밍/03.ASP.NET / 2008. 9. 21. 18:56

ㅁ UpdatePanelAnimationExtender

ASP.NET AJAX 컨트롤에 관심이 있는 분이라면 한번쯤 써 봤을 컨트롤인 UpdatePanel에 Animation 효과를 주게 하는 컨트롤입니다. 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>

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

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

</ContentTemplate>

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

</Triggers>

</asp:UpdatePanel>

</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페이지)

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

UpdatePanelAnimationExtender Code

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

BehaviorID="anima" TargetControlID="UpPanel01">

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

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

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

</Parallel>

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

</Condition>

</Condition>

</Condition>

</Parallel>

</Sequence>

</OnUpdating>

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

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

</Condition>

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

</Condition>

</Condition>

</Parallel>

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

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

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

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

invalid-file

Posted by happydong

, |

[AJAX Control] TabContainer Control 써보기~!

프로그래밍/03.ASP.NET / 2008. 9. 18. 18:47

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

</AjaxControl:TabPanel>

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

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

</ContentTemplate>

</AjaxControl:TabPanel>

</AjaxControl:TabContainer>

이렇게 해서 두 개의 탭이 만들어 졌습니다. 두 개의 텝이 조금 다르게 보이시나요~! 코드상으로 연애 뉴스 탭쪽은 HeaderText 속성 사용해서 탭 부분에 문자를 넣어 봤고요, 두 번째 스포츠 뉴스 쪽에는 HeaderTemplate 속성을 이용해서 문자를 넣어 봤습니다. 그리고 OnClientClick속성을 이용해서 스크립트 함수를 호출하도록 해 봤습니다 . 스크립트 함수는 아주 간단합니다. 그냥 메세지 출력입니다

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

Script Code (aspx페이지)

function TabPanulClick()

{

alert("이벤트 발생");

}

</script>

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

TabPanel Code (aspx페이지)

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

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

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

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

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

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

</div>

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

left: 135px;">

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

</div>

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

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

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

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

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

</div>

</ContentTemplate>

</AjaxControl:TabPanel>

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

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

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

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

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

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

</div>

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

left: 135px;">

 소렌스탐, 올17개<br />대회만에 첫 승

</div>

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

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

<br />

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

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

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

</div>

</ContentTemplate>

</AjaxControl:TabPanel>

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

3.그림(처음실행)