|
|
포스트를 읽기에 앞서...
- 이 포스트는 영문으로 작성되어 제공되어진 것을 제가 제 나름대로 한글로 번역하였으며, 충분하게 잘못된 번역이 있을 수 있습니다. 잘못된 번역 부분에 대해서는 덧글로 달아주시면 수정하도록 하겠습니다.
- 이 포스트는 단지 번역을 한 것 뿐이며, 모든 저작권에 대해서는 영문 웹 페이지에 명시된 곳에 있습니다.
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 :
- 이 테마를 사용하기 위해서는, CSS 파일을 포함한 후, TabContainer 컨트롤의 CssClass를 'ajax__tab_technorati-theme'로 설정합니다.
- 여러분의 컴퓨터에 이미지를 카피하고, 만약 경로가 변경되었다면 스타일시트의 경로를 수정하십시요. 이 테마를 위한 이미지는 다운로드한 img/technorati 디렉토리의 에서 찾으실 수 있습니다.
- 저는 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 :
- 이 테마를 사용하기 위해서는, CSS 파일을 포함한 후, TabContainer 컨트롤의 CssClass를 'ajax__tab_msngallery-theme'로 설정합니다.
- 여러분의 컴퓨터에 이미지를 카피하고, 만약 경로가 변경되었다면 스타일시트의 경로를 수정하십시요. 이 테마를 위한 이미지는 다운로드한 img/msngallery 디렉토리의 에서 찾으실 수 있습니다.
- 저는 IE 7.0과 FireFox에서 테스트했지만, 어떠한 문제도 접할 수 없었습니다.
YUI Tab Theme
저는 이전에 YUI theme에 대한 글을 포스팅했었지만, 여러분이 이 포스트를 찾지 못한다는 만일의 경우를 가정하여, 다시 간단히 언급하였습니다.
Notes :
- 이 테마를 사용하기 위해서는, CSS 파일을 포함한 후, TabContainer 컨트롤의 CssClass를 'ajax__tab_yuitabview-theme'로 설정합니다.
- 여러분의 컴퓨터에 이미지를 카피하고, 만약 경로가 변경되었다면 스타일시트의 경로를 수정하십시요. 이 테마를 위한 이미지는 다운로드한 img/yui 디렉토리의 에서 찾으실 수 있습니다.
- 저는 IE 7.0과 FireFox에서 테스트했지만, 어떠한 문제도 접할 수 없었습니다.
Windows Internet Explorer Tab Theme
마지막으로 Windows Internet Explorer home page에서 발견한 탭 컨트롤을 만들었습니다.
Notes :
- 이 테마를 사용하기 위해서는, CSS 파일을 포함한 후, TabContainer 컨트롤의 CssClass를 'ajax__tab_yuitabview-theme'로 설정합니다.
- 여러분의 컴퓨터에 이미지를 카피하고, 만약 경로가 변경되었다면 스타일시트의 경로를 수정하십시요. 이 테마를 위한 이미지는 다운로드한 img/ie 디렉토리의 에서 찾으실 수 있습니다.
- 저는 IE 7.0과 FireFox에서 테스트했습니다. FireFox에서는 첫번째 탭의 정렬이 약간의 문제를 가지고 있는 것으로 드러났습니다. 이것을 해결하기 위해 작업중입니다.
이것으로 끝마치도록 하겠습니다.
포스팅을 마치며... ----------------------------------------------------------------------------
기본적인 ASP.NET AJAX의 탭 컨트롤의 모양이 마음에 들지 않았었는데, 다양하게 쓰라고 스타일시트를 제공해주네요. ^^;;
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
|
|
|
|
|