[번역 - Matt Berseth] AjaxControlToolkit TabContainer 테마 샘플

출처 : http://www.neostyx.net/GrayRec/NXBlogPostView.aspx?postid=071001104501868&categoryname=ASP.NET+AJAX

맨날 펌질만 하네요 쩝..

마지막에 ajax__tab_yuitabview-theme가 아니라 ajax__tab_ie-theme네요..

원문이 오타인지 번역이 오타인지는 알수 없지만 재가공 하지 않고 그냥 둡니다 -ㅁ-;

포스트를 읽기에 앞서...
- 이 포스트는 영문으로 작성되어 제공되어진 것을 제가 제 나름대로 한글로 번역하였으며, 충분하게 잘못된 번역이 있을 수 있습니다. 잘못된 번역 부분에 대해서는 덧글로 달아주시면 수정하도록 하겠습니다.
- 이 포스트는 단지 번역을 한 것 뿐이며, 모든 저작권에 대해서는 영문 웹 페이지에 명시된 곳에 있습니다.

More Sample AjaxControlToolkit TabContainer Themes ...

AjaxControlToolkit's TabContainer 컨트롤을 위한 YUI TabView 테마로 작업중에, 저는 웹을 돌아다니면서 제가 보았던 다른 탭 스타일의 컨트롤을 위한 몇 개의 TabContainer 테마들을 더 만드는 것이 재미있을 것이라고 생각했습니다. 특히 저는 각 탭 패널의 헤더에 이미지가 포함된 것을 보고 흥미를 느꼈습니다.

제가 목표로 한 컨트롤을 인터넷 어디에서 찾았는지, 그리고 테마와 부합하는 컨트롤을 만들기 위한 간단한 설명을 아래에 기술하였습니다. 만약 여러분이 TabContainer의 테마 작업에 대해서 잘 알지 못한다면, 저는 documentation for the TabContainer control를 읽을 것을 추천합니다.

Download | Live Demo | View Stylesheet

Technorati Tab Theme

저는 Technorati 의 탭 컨트롤이 간단하기 때문에 좋아하는데, 적어도 저는 이 탭 컨트롤이 기본적인 XP 스타일의 TabContainer 테마보다 더 좋은 모양을 가지고 있다고 생각합니다.

Notes :

1. 이 테마를 사용하기 위해서는, CSS 파일을 포함한 후, TabContainer 컨트롤의 CssClass를 'ajax__tab_technorati-theme'로 설정합니다.


2. 여러분의 컴퓨터에 이미지를 카피하고, 만약 경로가 변경되었다면 스타일시트의 경로를 수정하십시요. 이 테마를 위한 이미지는 다운로드한 img/technorati 디렉토리의 에서 찾으실 수 있습니다.


3. 저는 IE 7.0과 FireFox에서 테스트했지만, 어떠한 문제도 접할 수 없었습니다.

Windows Live Gallery Tab Theme

저는 특별히 Windows Live Gallery style tab를 고려하지는 않았지만, 탭 헤더에 이미지가 포함되었기 때문에 흥미있는 샘플이라고 생각했습니다. 저는 이것을 제공하는 시나리오가 어려울 것이라 생각했지만, TabContainer가 탭 헤더에 사용하기 위한 템플릿을 정의하는 것이 허용되기 때문에, 전혀 문제가 되지 않았습니다.

'Sidebar gadget' 탭 패널의 샘플 코드를 보여드립니다. HeaderTemplate이 'Sidebar gadgets' 탭에서 사용되어야 하는 이미지와 헤더 글을 정의할 수 있는 융통성을 제공하는 것을 주목하십시요.

<ajaxToolkit:TabPanel runat="server">
  <HeaderTemplate>
    <div>
      <img src="img/msngallery/sidebar.png"/>
      <div>Sidebar gadgets</div>
    </div>
  </HeaderTemplate>
  <ContentTemplate>
  </ContentTemplate>
</ajaxToolkit:TabPanel>

Notes :

1. 이 테마를 사용하기 위해서는, CSS 파일을 포함한 후, TabContainer 컨트롤의 CssClass를 'ajax__tab_msngallery-theme'로 설정합니다.


2. 여러분의 컴퓨터에 이미지를 카피하고, 만약 경로가 변경되었다면 스타일시트의 경로를 수정하십시요. 이 테마를 위한 이미지는 다운로드한 img/msngallery 디렉토리의 에서 찾으실 수 있습니다.


3. 저는 IE 7.0과 FireFox에서 테스트했지만, 어떠한 문제도 접할 수 없었습니다.

YUI Tab Theme

저는 이전에 YUI theme에 대한 글을 포스팅했었지만, 여러분이 이 포스트를 찾지 못한다는 만일의 경우를 가정하여, 다시 간단히 언급하였습니다.

Notes :

1. 이 테마를 사용하기 위해서는, CSS 파일을 포함한 후, TabContainer 컨트롤의 CssClass를 'ajax__tab_yuitabview-theme'로 설정합니다.


2. 여러분의 컴퓨터에 이미지를 카피하고, 만약 경로가 변경되었다면 스타일시트의 경로를 수정하십시요. 이 테마를 위한 이미지는 다운로드한 img/yui 디렉토리의 에서 찾으실 수 있습니다.


3. 저는 IE 7.0과 FireFox에서 테스트했지만, 어떠한 문제도 접할 수 없었습니다.

Windows Internet Explorer Tab Theme

마지막으로 Windows Internet Explorer home page에서 발견한 탭 컨트롤을 만들었습니다.

Notes :

1. 이 테마를 사용하기 위해서는, CSS 파일을 포함한 후, TabContainer 컨트롤의 CssClass를 'ajax__tab_yuitabview-theme'로 설정합니다.


2. 여러분의 컴퓨터에 이미지를 카피하고, 만약 경로가 변경되었다면 스타일시트의 경로를 수정하십시요. 이 테마를 위한 이미지는 다운로드한 img/ie 디렉토리의 에서 찾으실 수 있습니다.


3. 저는 IE 7.0과 FireFox에서 테스트했습니다. FireFox에서는 첫번째 탭의 정렬이 약간의 문제를 가지고 있는 것으로 드러났습니다. 이것을 해결하기 위해 작업중입니다.

이것으로 끝마치도록 하겠습니다.



포스팅을 마치며... ----------------------------------------------------------------------------
기본적인 ASP.NET AJAX의 탭 컨트롤의 모양이 마음에 들지 않았었는데, 다양하게 쓰라고 스타일시트를 제공해주네요. ^^;;