'프로그래밍/03.ASP.NET' 카테고리의 글 목록 (3 Page)

'프로그래밍/03.ASP.NET'에 해당되는 글 28건

2008.10.17 [Tip] TabContainer 스타일 지정 3
2008.10.07 [AJAX Control] SliderExtender 써보기~!
2008.10.02 [ASP.NET 2.0] AdRotator Control 써보자

[Tip] TabContainer 스타일 지정

프로그래밍/03.ASP.NET / 2008. 10. 17. 17:33

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

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

.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="연애인">

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

<br />

... 내용 생략 ...

</ContentTemplate>

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

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

Reference : http://programming.top54u.com/post/ASP-Net-AJAX-Tab-Extender-CSS-Class-Styles.aspx

Posted by happydong

, |

[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

, |

[ASP.NET 2.0] AdRotator Control 써보자

프로그래밍/03.ASP.NET / 2008. 10. 2. 14:00

AdRotator 컨트롤은 ??
ASP.NET 웹 페이지에서 광고를 표시할 수 있는 것!!

사이트를 만들다 보면 광고이미지를 붙이는 경우가 많이 있을 것입니다. 그리고 그 광고 이미지가 매번
변경되게 하려면 여러므로 고생해서 코드를 짜야하는 삽질을 해야 할것 입니다.
ASP.NET에서는 AdRotator 컨트롤를 지원하고 있습니다.
AdRotator 컨트롤은 일반적으로 XML파일,데이터 소스를 사용하여 광고 이미지, URL, 광고 정보를 자동으로 읽을수 있습니다. (물론, 정해진 규칙에 의해 작성해야 한다는거 잊으면 안됩니다.)

AdRotator 어떻게 사용하지 ??

그럼 이제 예제를 통해서 어떻게 사용되는지 보도록 하겠습니다. (후비~고~우~^^)
VS2005로 새로운 프로젝트를 만듭니다. 그리고 늘 그랬듯 .aspx 페이지 하나와 XML 파일 하나를 만들어 줍니다.

그럼 먼저 XML 파일을 보도록 하겠습니다.

XML 파일

<?xml version="1.0" encoding="utf-8" ?>

<Ad>

<ImageUrl>~/AdRotatorControl/images/121392860807969400.jpg</ImageUrl>

<NavigateUrl>http://www.naver.com</NavigateUrl>

<Keyword>shopping1</Keyword>

</Ad>

<Ad>

<ImageUrl>~/AdRotatorControl/images/121394570027333900.gif</ImageUrl>

<Keyword>shopping1</Keyword>

</Ad>

<Ad>

<ImageUrl>~/AdRotatorControl/images/121394920519137200.jpg</ImageUrl>

<NavigateUrl>http://www.gmarket.co.kr/</NavigateUrl>

<Keyword>shopping2</Keyword>

</Ad>

<Ad>

<ImageUrl>~/AdRotatorControl/images/121444819075955200.gif</ImageUrl>

<Keyword>shopping2</Keyword>

</Ad>

</Advertisements>

위 와같은 XML 구조로 짜줘야 합니다! 그래야 AdRotator 컨트롤이 자동으로 데이터를 읽게 됩니다.
위 주석을 보아도 알수 있겠지만 추가 설명을 드리자면 <Keyword> 는 특정페이지에서 특정한 이미지들만 보여지게 할때 사용할수 있습니다. AdRotator 컨트롤의 AdvertisementFile 속성 이용해서 말이지요. (사용 방법은 아래 있습니다.) <Impressions>이미지(광고)를 보여줄 비율값입니다.(이값이 크면 자주 보여지겠지요)
저는 위 XML파일 명을 TestXMLFile.xml 이라고 하고 저장했습니다. 그리고 네이버에서 이미지 4개를 찾아서
AdRotatorControl폴더 안에있는 images폴더에 넣어 두었습니다.

그럼 이제 .aspx페이지 코드를 어떻게 되어 있는지 보도록 하겠습니다.

.aspx파일

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AdRotator.aspx.cs" Inherits="AdRotatorControl_AdRotator" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<asp:AdRotator runat="server" ID="AdChangeImage" AdvertisementFile="~/AdRotatorControl/TestXMLFile.xml" />

</div>

</form>

</body>

</html>

정말 간다하지 않습니까~^^
AdRotator 컨트롤의 AdvertisementFile속성은 XML파일의 경로를 가져오거나 설정합니다. 그리고 아까 위에서 말한 키위드(<Keyword>)는 AdRotator 컨트롤의 KeywordFilter속성을 이용합니다. 이속성은 필터링하는 범주 키워드를 자져오거나 설정합니다. 사용법은 아래와 같습니다.

<asp:AdRotator runat="server" ID="AdChangeImage" KeywordFilter="shopping1" AdvertisementFile="~/AdRotatorControl/TestXMLFile.xml" />

정말 간단하고 심플하지 않습니까?^^ 이제 한번 테스트 해보록 하겠습니다.
1. 그림

2. 그림

F5를 이용해서 계속 변경해 보세요~^^ 광고 이미지가 잘 바꿜것입니다.^^

참고 : [AdRotator 멤버] , [AdRotator 웹 서버 컨트롤 개요] <-- MSDN 링크 입니다.

Posted by happydong

, |

«이전 1 2 3 4 5 6 ··· 10 다음»

최고보다,최선을...

카테고리

달력

공지사항

태그목록

최근에 올라온 글

'프로그래밍/03.ASP.NET'에 해당되는 글 28건

[Tip] TabContainer 스타일 지정

[AJAX Control] SliderExtender 써보기~!

[ASP.NET 2.0] AdRotator Control 써보자

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

링크

티스토리툴바