그누보드 메인 jquery tab 소스입니다. 정보
그누보드 메인 jquery tab 소스입니다.
본문
불당님 불지피고 관리자님께서 허락하신 현재 sir 초기페이지 jquery ajax tab 관련 코드입니다.
제가 손댄부분은 거의 없고, 탭 관련 해당소스만 간추린 것입니다.
제가 손댄부분은 거의 없고, 탭 관련 해당소스만 간추린 것입니다.
* 아래 내용을 그누보드 환경에서 별도파일로 저장 jquery 코어파일 링크후 테스트 해보세요.
// 시작 -------------------------------------------------------------
// 시작 -------------------------------------------------------------
<style type="text/css">
/* 탭 버튼 공통 */
.nav {float:left; width:100%; margin:0; padding:5px 0 0 0px; list-style:none; background:#ffffff url(http://sir.co.kr/img/nav/nav_bg.gif) repeat-x bottom right;}
.nav li {float:left; margin:0; padding:0; font-family:Dotum; font-size:12px; letter-spacing:-1px;}
.nav a {float:left; display:block; margin:0 1px 0 0; padding:4px 8px; text-decoration:none; border:1px solid #9B8748; border-bottom:none; background:#dddddd url(http://sir.co.kr/img/nav/off_bg.gif) repeat-x top left;}
.nav li a.selected {color:#000; letter-spacing:-1px; font-weight:bold; padding-bottom:5px; border-color:#727377; background:#fff url(http://sir.co.kr/img/nav/on_bg.gif) repeat-x top left;}
.display_none {display:none;}
/* _width:~~ 에서 _는 ie6전용 hack */
#good_skin_wrap {clear:both; border:1px solid #9B8748; border-top:none; _width:430px; _height:263px;}
#good_skin_0 {clear:both; padding:5px 0;}
#good_skin_1 {clear:both; padding:5px 0;}
#good_site_nav {padding-top:15px;}
#good_site_wrap {border:1px solid #9B8748; border-top:none; _width:430px;}
#good_site_0 {clear:both; padding:5px 0;}
#good_site_1 {clear:both; padding:5px 0;}
#new_post_nav {clear:both; padding-top:8px;}
#new_post_wrap {clear:both; border:1px solid #9B8748; border-top:none;}
#new_post_wrap ul {margin:0; padding:0px; list-style:none;}
#new_post_wrap li {height:14px; margin:0 0 5px 0; overflow:hidden; letter-spacing:-1px;}
#new_post_0, .new_post_pad {clear:both; padding:10px 10px 5px 10px;}
#new_post_wrap li a {color:#222222;}
#new_post_wrap li a:visited {color:#617FB9;}
.bk1 {background-color:#ededed;}
#new_post_loading {text-align:center;}
#text_ad ul {list-style:none; padding:5px 0 0 0px; margin:0;}
#text_ad li {padding:5px 0 0 0;}
#text_ad li a {letter-spacing:-1px; color:#000;}
#text_ad a.text_ad_back {background-color:#000; color:#fff; padding:2px 0;}
</style>
<div style="width:430px; height:auto;">
<ul id='good_skin_nav' class='nav'>
<li><a class='selected' href="">그 추천스킨</a></li>
<li><a href="">그 추천빌더</a></li>
</ul>
<div id='good_skin_wrap'>
<div id='good_skin_0'>
<!-- ext -->
<h3>그 추천스킨</h3>
<ul class="tmp">
<li>추천스킨</li>
<li>추천스킨</li>
<li>추천스킨</li>
<li>추천스킨</li>
</ul>
<!-- //ext -->
</div><!-- /good_skin_skin -->
<div id='good_skin_1' style='display:none;'>
<!-- ext -->
<h3>그 추천빌더</h3>
<ul class="tmp">
<li>추천빌더</li>
<li>추천빌더</li>
<li>추천빌더</li>
<li>추천빌더</li>
</ul>
<!-- //ext -->
</div>
</div>
<!-- /good_skin_wrap -->
</div>
<div style="width:430px; height:auto;">
<ul id='good_site_nav' class='nav'>
<li><a class='selected' href="">그 추천사이트</a></li>
<li><a href="">영 추천사이트</a></li>
</ul>
<div id='good_site_wrap'>
<div id='good_site_0'>
<!-- ext -->
<h3>그 추천사이트</h3>
<ul class="tmp">
<li>그 추천사이트</li>
<li>그 추천사이트</li>
<li>그 추천사이트</li>
<li>그 추천사이트</li>
</ul>
<!-- //ext -->
</div>
<div id='good_site_1' style='display:none;'>
<!-- ext -->
<h3>영카트4 추천사이트</h3>
<ul class="tmp">
<li>영 추천사이트</li>
<li>영 추천사이트</li>
<li>영 추천사이트</li>
<li>영 추천사이트</li>
<li>영 추천사이트</li>
</ul>
<!-- //ext -->
</div>
</div>
<!-- good_site_wrap -->
</div>
<div style="width:200px; height:auto;">
<ul id='new_post_nav' class='nav'>
<li><a href="">자유</a></li>
<li><a href="">그누</a></li>
<li><a href="">제작</a></li>
<li><a class='selected' href="">팁텍</a></li>
</ul>
<div id='new_post_wrap'>
<div id='new_post_0' class='new_post_pad display_none'>
<!-- ext -->
<h3>자유</h3>
<ul class="tmp">
<li>자유</li>
<li>자유</li>
<li>자유</li>
<li>자유</li>
<li>자유</li>
</ul>
<!-- //ext -->
</div>
<div id='new_post_1' class='new_post_pad display_none'>
<!-- ext -->
<h3>그누</h3>
<ul>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
</ul>
<!-- //ext -->
</div>
<div id='new_post_2' class='new_post_pad display_none'>
<!-- ext -->
<h3>제작</h3>
<ul>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
</ul>
<!-- //ext -->
</div>
<div id='new_post_3' class='new_post_pad display_none'>
<!-- ext -->
<h3>팁텍</h3>
<ul>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
<li><a href="">======================</a></li>
</ul>
<!-- //ext -->
</div>
</div>
<!-- /new_post_wrap -->
<div id='text_ad'>
<!-- ext 아래와 같은 형식으로 코딩해야함 -->
<ul>
<li><a href="">======================</a></li>
<li><a href="">----------------------</a></li>
<li><a href="">/////////////////////////////</a></li>
<li><a href="">vvvvvvvvvvvvvvvvvvvvvv</a></li>
<li><a href="">^^^^^^^^^^^^^^^^^^^^^</a></li>
<li><a href="">~~~~~~~~~~~~~~~~</a></li>
</ul>
<!-- //ext -->
</div>
<div id='new_post_loading'><img src='http://sir.co.kr/img/ajax_loading.gif' border=0></div>
</div>
<script type="text/javascript">
// jquery 함께쓰기
var $j = jQuery.noConflict();
// 텍스트 롤링
var text_ad_index = 1;
var text_ad_save_index = null;
function text_ad_rolling() {
if (text_ad_save_index != null)// li:nth-child(n) 은 n번째 자식 li
$j('#text_ad li:nth-child('+text_ad_save_index+') a').removeClass('text_ad_back').css('color','#000');
$j('#text_ad li:nth-child('+text_ad_index+') a').addClass('text_ad_back').css('color','yellow');
text_ad_save_index = text_ad_index;
text_ad_index++;
if (text_ad_index > $j('#text_ad li').length)
text_ad_index = 1;
setTimeout("text_ad_rolling()", 1900);
}
$j(document).ready(function() {
// 아래 두줄은 테스트를 위해 붙임
$j("div h3").css({display:"none"});//타이틀 숨김
$j(".tmp").css({height:"200px", margin:"0 20px"});//기본높이
// 추천스킨
var good_skin_selected_index = 0;
$j('#good_skin_nav li').each(function(i) {
$j(this).mouseover(function() {
if (good_skin_selected_index == i) return false;
$j('#good_skin_'+good_skin_selected_index).fadeOut("slow").hide();
$j('#good_skin_nav li:nth-child('+(good_skin_selected_index+1)+') a').removeClass('selected');
$j('#good_skin_'+i).fadeIn("slow").show();
$j('#good_skin_nav li:nth-child('+(i+1)+') a').addClass('selected');
good_skin_selected_index = i;
set_cookie("ck_good_skin", i, 86400, "<?=$g4['cookie_domain']?>");
});
});
// 추천사이트
var good_site_selected_index = 0;
$j('#good_site_nav li').each(function(i) {
$j(this).mouseover(function() {
if (good_site_selected_index == i) return false;
$j('#good_site_'+good_site_selected_index).fadeOut("slow").hide();
$j('#good_site_nav li:nth-child('+(good_site_selected_index+1)+') a').removeClass('selected');
$j('#good_site_'+i).fadeIn("slow").show();
$j('#good_site_nav li:nth-child('+(i+1)+') a').addClass('selected');
good_site_selected_index = i;
set_cookie("ck_good_site", i, 86400, "<?=$g4['cookie_domain']?>");
});
});
// 새글
var new_post_selected_index = 3;
$j('#new_post_nav li').each(function(i) {
$j(this).mouseover(function() {
if (new_post_selected_index == i) return false;
$j('#new_post_'+new_post_selected_index).fadeOut("slow").hide();
$j('#new_post_nav li:nth-child('+(new_post_selected_index+1)+') a').removeClass('selected');
$j('#new_post_'+i).fadeIn("slow").show();
$j('#new_post_nav li:nth-child('+(i+1)+') a').addClass('selected');
new_post_selected_index = i;
set_cookie("ck_new_post", i, 86400, "<?=$g4['cookie_domain']?>");
});
});
// li:odd 홀수번째 li에 bk1 클래스 지정, even은 짝수번째
$j('#new_post_wrap ul > li:odd').each(function(i) {
$j(this).addClass('bk1');
});
$j('#new_post_loading').addClass('display_none');
$j('#new_post_3').removeClass('display_none');
text_ad_rolling();
});
</script>
// ------------------------------------------------------------- 끝
// ------------------------------------------------------------- 끝
추천
2
2
관련링크
댓글 8개
수정불능이네요..ㅠㅠ
참고로 코드중에서 <!-- ext -->와 <!-- //ext -->사이의 코드는 동작과는 무관한 임시코드입니다.
그 부분에 개인에 맞는 최신글들을 가져오면 될것입니다.
쿠키관련 부분은 제가 임의로 수정하려다 보류하고 테스트에서 제외했습니다.
참고로 코드중에서 <!-- ext -->와 <!-- //ext -->사이의 코드는 동작과는 무관한 임시코드입니다.
그 부분에 개인에 맞는 최신글들을 가져오면 될것입니다.
쿠키관련 부분은 제가 임의로 수정하려다 보류하고 테스트에서 제외했습니다.
사실 저도 밑에서 글읽고 이거 하루종일 보고있었어요..^^;;
해야할일은 따로있는데...ㅠ.ㅠ
해야할일은 따로있는데...ㅠ.ㅠ
공부해봐야 겠습니다.
감사합니다.
감사합니다.
여전히 다른분들을 위해서 애쓰고 계시군요. ^^
sir 홈페이지에서
FF(3.0.3) 에서두 탭 사이를 마우스로 왔다갔다 했더니
아예 두 탭에 해당하는 내용이 다 나오네요.
제 컴퓨터가 느려서 그런지도......(core duo 1.4GHz)
타이머가 도입되어야 할 듯 싶습니다.
sir 홈페이지에서
FF(3.0.3) 에서두 탭 사이를 마우스로 왔다갔다 했더니
아예 두 탭에 해당하는 내용이 다 나오네요.
제 컴퓨터가 느려서 그런지도......(core duo 1.4GHz)
타이머가 도입되어야 할 듯 싶습니다.
오랬만에 뵙네요..
제가해본 다른방식들에서도 비슷한 문제가 있더군요.
장난처럼 왔다갔다 하면 제자리를 못찾는거하고 말씀하신 부분하고요.
타이머를 걸어도 잘 해결이 안되던데요.
"탭에 마우스오버된 상태에서 얼마후" 랜더링하는 개념이겠군요. 좀더 삽질을 해봐야겠네요..
제가해본 다른방식들에서도 비슷한 문제가 있더군요.
장난처럼 왔다갔다 하면 제자리를 못찾는거하고 말씀하신 부분하고요.
타이머를 걸어도 잘 해결이 안되던데요.
"탭에 마우스오버된 상태에서 얼마후" 랜더링하는 개념이겠군요. 좀더 삽질을 해봐야겠네요..
ajax로 쿠키가 있는 탭의 내용만 가져오고 나머지는 누르는 시점에 가져오면 안되나요???
그방식은 해둔게 있습니다.
클릭 > 클릭은 아무 문제가 없는데.
http://tottoe.com/template/customer/ajax_5_3.php
마우스오버 > 클릭으로 할때 탭간을 아주 빠르게 이동하면 서브가 제자리를 못찾는 문제가 있네요.
http://tottoe.com/template/customer/ajax_5_2.php
위엣것 두개는 이미 로드된 데이타를 랜더링하는 방식이고,
이것은 외부 php파일을 실행시켜 실시간으로 랜더링하는 것입니다.
이것도 쿠키가 적용된것입니다.
http://tottoe.com/template/customer/ajax_4.php#archives
두개 모두 활성탭에 이벤트를 제한하는것이 공히 필요합니다.
결과적으로 쓰임새에 맞는 방식을 선택하는것이 필요할듯 합니다.
클릭 > 클릭은 아무 문제가 없는데.
http://tottoe.com/template/customer/ajax_5_3.php
마우스오버 > 클릭으로 할때 탭간을 아주 빠르게 이동하면 서브가 제자리를 못찾는 문제가 있네요.
http://tottoe.com/template/customer/ajax_5_2.php
위엣것 두개는 이미 로드된 데이타를 랜더링하는 방식이고,
이것은 외부 php파일을 실행시켜 실시간으로 랜더링하는 것입니다.
이것도 쿠키가 적용된것입니다.
http://tottoe.com/template/customer/ajax_4.php#archives
두개 모두 활성탭에 이벤트를 제한하는것이 공히 필요합니다.
결과적으로 쓰임새에 맞는 방식을 선택하는것이 필요할듯 합니다.
고생하셨습니다.
