jquery 코어로 구현된 탭 소스 + 쿠키 제어

개발자 jquery

플록

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 16년 전 · 조회 3311 3311 · 댓글 1 1

jquery 코어로 구현된 탭 소스 + 탭 쿠키 제어되게 했습니다.

http://tottoe.com/template/customer/mypage.php test 0000

그리고 상단 검색폼아래 `바로가기메뉴`도 초미니 ajax와 쿠키가 적용된 것입니다.

http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=84064 //쿠키 미적용

피드백 부탁드려요^^

#tabbed_box_mypage {margin: 0 auto; width:660px;}

.tabbed_area {border:1px solid #EEE; background-color:#FBF2F6; padding:8px;}

ul.tabs {margin:0px; padding:0px; margin-top:5px; margin-bottom:6px;}

ul.tabs li {list-style:none; display:inline;}

ul.tabs li a {background-color:#FF4091; color:#ffebb5; padding:8px 14px 8px 14px; text-decoration:none; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; border:1px solid #EEE; background-image:url(/img/tabs/tab_off.jpg); background-repeat:repeat-x; background-position:bottom;}

ul.tabs li a:hover {background-color:#ff40a4; border-color:#BF306D; border-bottom:none;}

ul.tabs li a.active {background-color:#ffffff; color:#282e32; border:1px solid #EEE; border-bottom: 1px solid #ffffff; background-image:url(/img/tabs/tab_on.jpg); background-repeat:repeat-x; background-position:top;}

.content {background-color:#ffffff; padding:10px; border:1px solid #EEE; font-family:Arial, Helvetica, sans-serif; background-image:url(/img/tabs/content_bottom.jpg); background-repeat:repeat-x; background-position:bottom;}

#content_1, #content_2, #content_3, #content_4, #content_5 {display:none;}

.content ul {margin:0px; padding:0px 20px;}

.content ul li {list-style:none; border-bottom:1px solid #d6dde0; padding-top:15px; padding-bottom:15px; font-size:13px;}

.content ul li:last-child {border-bottom:none;}

.content ul li a {text-decoration:none; color:#3e4346;}

.content ul li a small {color:#8b959c; font-size:9px; text-transform:uppercase; font-family:Verdana, Arial, Helvetica, sans-serif; position:relative; left:4px; top:0px;}

.content ul li a:hover {color:#a59c83;}

.content ul li a:hover small {color:#baae8e;}

</style>

<li><a href="#" name="content_4" class="tab" title="" onfocus='this.blur()'>포인트정책 및 권한</a></li>

</ul>

내용1

</div>

내용2

</div>

내용3

</div>

내용4

</div>

내용5

</div>

// jquery core tabs + cookie 2008년 12월 12일 금요일 플록

var $j = jQuery.noConflict();

$j(document).ready(function()

{

var COOKIE_NAME = "mypage_tab_<?=$member['mb_id']?>";
var COOKIE_DATA = $j.cookie(COOKIE_NAME);
if (COOKIE_DATA)
{
    $j("a.tab[@name="+COOKIE_DATA+"]").addClass("active");//name과 쿠키값 일치하는탭
    $j("#"+COOKIE_DATA).slideDown();
}
else
{
    $j("a.tab[@name=content_1]").addClass("active");//기본값
    $j("#content_1").slideDown();
}

$j("a.tab").click(function (){
    // switch all tabs off
    $j(".active").removeClass("active");
    // del cookie
    $j.cookie(COOKIE_NAME, null, { path: '/' });
    // switch this tab on
    $j(this).addClass("active");
    // slide all content up
    $j(".content").hide();//slideUp 정신없다
    // slide this content up
    var content_show = $j(this).attr("name");
    // set cookie
    $j.cookie(COOKIE_NAME, content_show, { path: '/', expires: 10 });

$j("#"+content_show).slideDown();
return false;
});

});

</script>

[이 게시물은 관리자님에 의해 2011-10-31 16:55:28 jQuery에서 이동 됨]

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

플록

프로필 보기 이 회원 글보기 이 회원의 댓글보기

16년 전

관련된 업데이트 있습니다.

간혹일어나는 sleep 방지를 위해 setTimeout 넣었습니다.
버튼옆에 preloading 이미지 넣었습니다.

http://tottoe.com/template/customer/mypage.php test 0000
http://tottoe.com/bbs/board.php?bo_table=pds&wr_id=84

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	제목	글쓴이	날짜	조회
5627	애드센스 수입 국세청에 신고하여야 할까? #개발자 #기타	멋진남자임 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	1446
5626	반응형 가변(가로, 세로) 아이프레임 제이쿼리 플러그인 [7] #퍼블리셔 #반응형	묵공 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	3852
5625	세로편집하기 하기(Notepad++ 사용) #개발자 #기타	멋진남자임 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	1509
5624	Ajax 로 받은 Json 값을 View 형식에 맞춰 표현 [2] #개발자 #javascript	벤지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	2086
5623	페이지에 좋은글,책속의 한줄 랜덤으로 뿌리기 #개발자 #php	바포매트 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	1550
5622	도메인 입력하면 그 사이트 파비콘 보이기 [17] #개발자 #기타	네이비칼라 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	1597
5621	개발해줄때 계약서에 명시해야 하는 중요한 점 [2] #개발자 #기타	멋진남자임 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	1390
5620	영카트 모바일에서 회원가입, 주문서에서 주소검색 버그 해결책 #개발자 #기타	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	1084
5619	기획 진행시, 복잡한 생각을 정리해줄 수 있는 툴!! [3] #기획자 #기타	베지터 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	3391
5618	MYSQL 쿼리순서, 부하여부 질문드려요 #개발자 #mysql	이웃집초보 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	1261
5617	매뉴얼, 북 등의 문서 협업 / 디자인 목업 #기획자 #기타	wooriteam 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	4601
5616	vi 편집기에서 세로로 문자열 입력 #개발자 #기타	멋진남자임 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	1090
5615	세로로 편집하기 - 꼭 필요한 기능 #개발자 #기타	멋진남자임 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	1353
5614	계륵.. css3, jquery 를 이용한 랜덤 돌림판 포인트게임 #퍼블리셔 #기타	뽁스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	4476
5613	mysql 연결 방법 2가지 [2] #개발자 #node.js	파랑새1597 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	2588
5612	한글로 된 숫자를 아라비아 숫자로 변환 [3] #개발자 #javascript	슈와이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	1989
5611	jquery.bxSlide를 이용하여 슬라이드만들기 [1] #개발자 #jquery	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	5226
5610	php에 number_format을 제이쿼리로.. 별것 다 있네요 굿이에요 #개발자 #jquery	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	2129
5609	익스8이하에서 css3을 사용하기 [3] #퍼블리셔 #css	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	3191
5608	제이쿼리로 이미지 회전 시키기 #개발자 #jquery	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	4108
5607	구형 익스에서 HTML5 적용시키기 [2] #개발자 #jquery	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	1932
5606	특정 레이어 높이 100% 잡는 법 [1] #개발자 #jquery	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	1893
5605	레이어팝업 가로 중앙 위치 시키기 #퍼블리셔 #css	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	5700
5604	모바일 해상도에 맞게 이미지 출력 [1] #개발자 #jquery	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	2669
5603	perl을 사용하여 쉘상에서 url 주소 실행 #개발자 #기타	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	988