블로그에 탭메뉴 사용하기

게시자: 대문 demun 카테고리: 퍼블리셔/jQuery 2012.06.10 06:00
이전에 자바스크립트로 블로그에서 사용하는 글을 적은 적이 있습니다.
이번에는 jquery 를 사용하는 방법입니다.
이번글을 쓰면서 이전글을 다시 돌아보는 계기가 됐군요.

예전글
블로그에서 탭메뉴 이용하기 =>  http://demun.tistory.com/1696 

오늘은 jquery 를 이용하는 방법입니다.
수많은 방법이 있지만 아주 간단하고 딱 탭에만 맞추어서 사용하는 코드를 골랐습니다.
예제코드는 jquery Cookbook 에서 골라왔습니다.
예제화면 보기 


위의 코드는 border 을 사용하고 탭에 이미지를 하나 사용합니다.
저는 여기서 좀더 수정하여 이미지를 사용하지 않고 border 도 사용하지 않았습니다.
그래서 어떤 배경에도 어울리도록 했고, 이미지가 없기 때문에 경로에 대한 오류도 없습니다.

더군다나 하단에 나만의 추천글이나 링크를 추가할수도 있습니다.
저의 경우는 추천글, 태그, 댓글, 트랙백, 라이브리댓글 이렇게 5가지를 하나로 묶어 보았습니다. 에제 화면을 보겠습니다.


사용하는 방법.


먼저 블로그에서 라이브리 댓글 플러그인을 사용한다면 jquery 를 로드하는 아래의 코드는 필요없습니다.
만약 사용하지 않는다면 아래의 코드가 필요합니다.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

jquery 를 사용하거나 라이브리 댓글을 사용한다면 아래의 코드를 </body> 위에 아래의 코드를 넣어주세요.
만약 그렇지 않다면 위의 코드 한줄도 포함해서 넣어주세요.
<script type="text/javascript">
	// 탭.
	function init_tabs() {
		$(".tab_content").css("display","none");
		if (!$('ul.tabs').length) { return; }
		$('div.tab_content_wrap').each(function() {
			$(this).find('div.tab_content:first').show();
		});
		$('ul.tabs a').click(function() {
			if (!$(this).hasClass('current')) {
				$(this).addClass('current').parent('li').siblings('li').find('a.current').removeClass('current');
				$($(this).attr('href')).show("1000").siblings('div.tab_content').hide("1000");
			}
			this.blur();
			return false;
		});
	}
	$(document).ready(function() {
		init_tabs();
	});
</script>

자 이제 아래의 html 코드를 서식으로 지정해서 사용하면 편합니다.
글쓸때 본문에 사용해도 되고, 스킨편집에서 본문치환자 아래에 넣어서 사용해도 됩니다.
여기서는 일단 본문에서 사용한다고 가정하고 진행합니다.
글쓰기창 우측에 html 에 체크를 하고 아래의 코드를 넣어주세요.
<!-- 탭시작 -->
<div class="tab-wrap">
	<ul class="tabs">
		<li>
			<a href="#tab_content_primary_01">Tab 1</a>
		</li>
		<li>
			<a href="#tab_content_primary_02">Tab 2 </a>
		</li>
		<li>
			<a href="#tab_content_primary_03">Tab 3</a>
		</li>
		<li>
			<a href="#tab_content_primary_04">Tab 4</a>
		</li>
		<li>
			<a href="#tab_content_primary_05">Tab 5</a>
		</li>
	</ul>
	<div class="tab_content_wrap">
		<div id="tab_content_primary_01" class="tab_content">
			<p>
				<strong>Content Area 01</strong>
			</p>
			<ul>
				<li><a href="#" title="">링크 1</a></li>
				<li><a href="#" title="">링크 2</a></li>
				<li><a href="#" title="">링크 3</a></li>
				<li><a href="#" title="">링크 4</a></li>
			</ul>
		</div>
		<div id="tab_content_primary_02" class="tab_content">
			<p>
				<strong>Content Area 02</strong>
			</p>
			<p>
				Tab Link 02 의 내용.<br /><br />
			</p>
		</div>
		<div id="tab_content_primary_03" class="tab_content">
			<p>
				<strong>Content Area 03</strong>
			</p>
			<p>
				Tab Link 03 의 내용.<br /><br />
			</p>
		</div>
		<div id="tab_content_primary_04" class="tab_content">
			<p>
				<strong>Content Area 04</strong>
			</p>
			<p>
				Tab Link 04 의 내용.<br /><br />
			</p>
		</div>
		<div id="tab_content_primary_05" class="tab_content">
			<p>
				<strong>Content Area 05</strong>
			</p>
			<p>
				Tab Link 05 의 내용. <br /><br />
			</p>
		</div>
	</div><!-- //tab_content_wrap -->
</div><!-- //tab-wrap -->
<!-- // 탭끝 -->

그 다음 스킨편집에서 css 맨아래에 아래의 코드를 넣어줍니다.
.tab-wrap { position:relative; padding:0; margin:2em 0 0; background-color:#fff; border-style:solid; border-width:1px; border-color:#E1E1E1 #D4D4D4 #D4D4D4; border-radius:5px; box-shadow:0 1px 3px rgba(0, 0, 0, 0.15); }
.tabs { overflow: hidden; }
.tabs li, .tabs a { -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.tabs li { background: #fff; display: inline; float: left; list-style: none; margin: 0; padding: 1px 1px 0; text-align: center; width: 137px; }
.tabs a { color: #333; display: block; padding: 5px 0; text-decoration: none; background-color:#ccc; }
.tabs a.current { background-color: #06f; color: #fff; }
.tabs a:hover { background: #666; color: #fff; }
* html .tabs a, * html #tab_content_primary_01 a { height: 1%; } /* For IE6. */
.tab_content_wrap { position:relative; width:678px; padding:10px; background-color: #fff; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
#tab_content_primary_01 a { padding:0 0 0 15px; display:inline-block; background:url(images/list-dot.png) no-repeat 0 8px; }
#tab_content_primary_01 a:hover { color:#06f; text-decoration:underline; }

여기서 중요한 것은 위코드 중에서 너비에 관련한 곳입니다. 참고해서 보세요.
.tabs li {  
	width: 137px; /* 현재는 탭이 137px 짜리 5개가 있습니다. */
}
.tab_content_wrap { 
	width:678px; /* 본문너비보다 작게 해야 합니다. 저는 680px 입니다. */
}

위 부분은 본인의 블로그 스킨마다 다를수 있으니 너비조정을 통해서 깨지지 않도록 해야합니다.
또 한가지 저의 경우 #tab_content_primary_01 a 에 리스트 목록에 블릿이미지를 사용하였습니다.
그래서 아래와 같은 코드가 들어갔습니다.
#tab_content_primary_01 a { 
	padding:0 0 0 15px; 
	display:inline-block; 
	background:url(images/list-dot.png) no-repeat 0 8px; 
}

위 코드 그대로 사용하려면 아래 이미지를 스킨편집에서 업로드 하세요.


만약 이미지를 사용하지 않으려면 위코드와 이미지를 사용하지 않으면 됩니다.
즉 확인과정을 반드시 거치기 바랍니다.


신고

댓글

  1. 2012.06.10 21:35 신고 BlogIcon 한솔골프  댓글주소  수정/삭제  댓글쓰기

    대문님 혹시...카테고리 다른글을 추천글 대신 가져올수도 있나요?
    그리고 혹시 제스킨에 적용한다면요..기존 코멘트하고 트랙백 숫자표시되는 이미지는 어떻게 되는건가요?

    • BlogIcon 대문 demun 2012.06.10 22:59 신고  댓글주소  수정/삭제

      일단 글을 가져오는것은 자바스크립트로 뽑아서 가져오는것이 아니니까...
      즉 링크를 거는거니까 어떤 글이든 가능하죠....무엇이든지요...링크가 아닌 이미지나 아마도 다른것도...

      그리고 코멘트하고 트랙백 숫자는 제것을 보면 대략 이해가죠...
      이미지로 되어있지 않고 숫자로 표시됩니다.

      일단 이것도 만지면 더 수정이 가능합니다.....여기서는 그냥 깔끔하게 베이스로 한겁니다.

      만약 프렌즈님 스킨에서 한다면 기존의 댓글, 트랙백 이미지는 없어질거 같은데요...

  2. 2012.12.07 22:41  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  3. 2012.12.07 22:49 신고 BlogIcon 성군-프로그래머-  댓글주소  수정/삭제  댓글쓰기

    제가 로그인을안하고썻다가.. 비밀글을.. 비번을..하하;;
    민쭌~입니다..ㅎㅎ;;

  4. 2014.09.16 03:57 신고 BlogIcon 장박사실험중  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. 적용은 다 했는데요.
    서식으로 저장 후 서식을 해당글보기를 눌러서 보면 하면 탭선택이 잘 되는데요.
    게시물에 쓰고나서 해당글보기에서 탭을 선택하면 자꾸 로그인 화면으로 갑니다.

    테스트 익스플로러는 9버전과 크롬에서 해봤는데 계속 그러네요. 시간이 되시면 답변을 부탁드릴게요.

    • BlogIcon 대문 demun 2014.09.18 09:24 신고  댓글주소  수정/삭제

      댓글만 봐서는 원인을 알수 없네요...
      테스트 탭을 하나 만들어서 블로그에 포스팅하시고 링크를 알려주세요. 제가 한번 보겠습니다.