그누보드 메인 jquery tab 소스입니다.

그누보드 메인 jquery tab 소스입니다. 정보

그누보드 메인 jquery tab 소스입니다.

플록 자기소개 아이디로 검색 회원게시물
2008.12.20 01:46:49
조회 4,494
댓글 8

본문

불당님 불지피고 관리자님께서 허락하신 현재 sir 초기페이지 jquery ajax tab 관련 코드입니다.
제가 손댄부분은 거의 없고, 탭 관련 해당소스만 간추린 것입니다.

* 아래 내용을 그누보드 환경에서 별도파일로 저장 jquery 코어파일 링크후 테스트 해보세요.

// 시작 -------------------------------------------------------------

/* 탭 버튼 공통 */

.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>

</ul>

</ul>

</div>

</ul>

</div>

</div>

<li><a class='selected' href="">그 추천사이트</a></li>

<li><a href="">영 추천사이트</a></li>

</ul>

<h3>그 추천사이트</h3>

<li>그 추천사이트</li>

</ul>

</div>

<h3>영카트4 추천사이트</h3>

<li>영 추천사이트</li>

</ul>

</div>

</div>

</ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

<li><a href="">vvvvvvvvvvvvvvvvvvvvvv</a></li>

</ul>

</div>

</div>

// 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>
// ------------------------------------------------------------- 끝

댓글 전체

플록 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

08.12.20 01:53:06

수정불능이네요..ㅠㅠ
참고로 코드중에서 와 사이의 코드는 동작과는 무관한 임시코드입니다.
그 부분에 개인에 맞는 최신글들을 가져오면 될것입니다.
쿠키관련 부분은 제가 임의로 수정하려다 보류하고 테스트에서 제외했습니다.

공부합세 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

08.12.20 03:21:01

사실 저도 밑에서 글읽고 이거 하루종일 보고있었어요..^^;;

해야할일은 따로있는데...ㅠ.ㅠ

바람처럼s 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

08.12.20 12:23:18

공부해봐야 겠습니다.
감사합니다.

rolo 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

08.12.20 12:45:53

여전히 다른분들을 위해서 애쓰고 계시군요. ^^

sir 홈페이지에서
FF(3.0.3) 에서두 탭 사이를 마우스로 왔다갔다 했더니
아예 두 탭에 해당하는 내용이 다 나오네요.
제 컴퓨터가 느려서 그런지도......(core duo 1.4GHz)

타이머가 도입되어야 할 듯 싶습니다.

플록 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

08.12.20 15:26:34

오랬만에 뵙네요..
제가해본 다른방식들에서도 비슷한 문제가 있더군요.
장난처럼 왔다갔다 하면 제자리를 못찾는거하고 말씀하신 부분하고요.
타이머를 걸어도 잘 해결이 안되던데요.
"탭에 마우스오버된 상태에서 얼마후" 랜더링하는 개념이겠군요. 좀더 삽질을 해봐야겠네요..

아빠불당 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

08.12.20 14:02:07

ajax로 쿠키가 있는 탭의 내용만 가져오고 나머지는 누르는 시점에 가져오면 안되나요???

플록 자기소개 아이디로 검색 회원게시물

자기소개 아이디로 검색 회원게시물

08.12.20 15:18:39

그방식은 해둔게 있습니다.

클릭 > 클릭은 아무 문제가 없는데.
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

두개 모두 활성탭에 이벤트를 제한하는것이 공히 필요합니다.

결과적으로 쓰임새에 맞는 방식을 선택하는것이 필요할듯 합니다.

까만도둑 홈페이지 자기소개 아이디로 검색 회원게시물

홈페이지 자기소개 아이디로 검색 회원게시물

08.12.22 09:46:53

고생하셨습니다.

그누보드 메인 jquery tab 소스입니다. > 십년전오늘

십년전오늘

그누보드 메인 jquery tab 소스입니다. 정보

관련링크

본문

댓글 전체

회원로그인

진행중 포인트경매