jquery 코어로 구현된 탭 소스 + 탭 쿠키 제어되게 했습니다.
그리고 상단 검색폼아래 `바로가기메뉴`도 초미니 ajax와 쿠키가 적용된 것입니다.
피드백 부탁드려요^^
<style type="text/css">
#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>
<!-- http://tottoe.com/js/jquery.cookie.pack.js -->
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery-1.2.6.pack.js" charset="UTF-8"></script>
<script type="text/javascript" src="<?=$g4['path']?>/js/jquery.cookie.pack.js" charset="UTF-8"></script>
<div id="tabbed_box_mypage" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="#" name="content_1" class="tab" title="" onfocus='this.blur()'>회원정보</a></li>
<li><a href="#" name="content_2" class="tab" title="" onfocus='this.blur()'>예약내역</a></li>
<li><a href="#" name="content_3" class="tab" title="" onfocus='this.blur()'>최근 등록글</a></li>
<li><a href="#" name="content_4" class="tab" title="" onfocus='this.blur()'>포인트정책 및 권한</a></li>
<li><a href="#" name="content_5" class="tab" title="" onfocus='this.blur()'>아카이브</a></li>
</ul>
<div id="content_1" class="content">
내용1
</div>
<div id="content_2" class="content">
내용2
</div>
<div id="content_3" class="content">
내용3
</div>
<div id="content_4" class="content">
내용4
</div>
<div id="content_5" class="content">
내용5
</div>
</div>
</div>
<script type="text/javascript">
// 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();
}
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 });
// 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;
});
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
간혹일어나는 sleep 방지를 위해 setTimeout 넣었습니다.
버튼옆에 preloading 이미지 넣었습니다.
http://tottoe.com/template/customer/mypage.php test 0000
http://tottoe.com/bbs/board.php?bo_table=pds&wr_id=84
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6930 |
SOFTA
|
11년 전 | 5974 | |
| 6929 |
 LaRuota |
11년 전 | 1589 | |
| 6928 | 11년 전 | 1748 | ||
| 6927 | 11년 전 | 1769 | ||
| 6926 | 11년 전 | 1868 | ||
| 6925 | 11년 전 | 2267 | ||
| 6924 | 11년 전 | 3863 | ||
| 6923 | 11년 전 | 2257 | ||
| 6922 |
level999
|
11년 전 | 1024 | |
| 6921 | 11년 전 | 808 | ||
| 6920 | 11년 전 | 944 | ||
| 6919 | 11년 전 | 1053 | ||
| 6918 | 11년 전 | 1310 | ||
| 6917 | 11년 전 | 15425 | ||
| 6916 | 11년 전 | 1424 | ||
| 6915 | 11년 전 | 571 | ||
| 6914 | 11년 전 | 599 | ||
| 6913 | 11년 전 | 872 | ||
| 6912 | 11년 전 | 3125 | ||
| 6911 |
사랑해요79
|
11년 전 | 960 | |
| 6910 | 11년 전 | 739 | ||
| 6909 | 11년 전 | 775 | ||
| 6908 | 11년 전 | 634 | ||
| 6907 | 11년 전 | 827 | ||
| 6906 | 11년 전 | 1582 | ||
| 6905 | 11년 전 | 559 | ||
| 6904 | 11년 전 | 995 | ||
| 6903 | 11년 전 | 1668 | ||
| 6902 |
2donggalbi
|
11년 전 | 510 | |
| 6901 | 11년 전 | 1378 | ||
| 6900 | 11년 전 | 708 | ||
| 6899 | 11년 전 | 853 | ||
| 6898 |
열라뽕똬이
|
11년 전 | 1301 | |
| 6897 |
this1mg
|
11년 전 | 1590 | |
| 6896 |
sbdossb
|
11년 전 | 565 | |
| 6895 |
봉보로봉봉
|
11년 전 | 1141 | |
| 6894 |
똘똘이스머츠
|
11년 전 | 489 | |
| 6893 |
네이비컬러
|
11년 전 | 3638 | |
| 6892 | 11년 전 | 1069 | ||
| 6891 |
네이비컬러
|
11년 전 | 1313 | |
| 6890 | 11년 전 | 1135 | ||
| 6889 | 11년 전 | 579 | ||
| 6888 | 11년 전 | 713 | ||
| 6887 | 11년 전 | 604 | ||
| 6886 | 11년 전 | 5051 | ||
| 6885 | 11년 전 | 546 | ||
| 6884 |
asfasdfd235
|
11년 전 | 562 | |
| 6883 | 11년 전 | 3026 | ||
| 6882 | 11년 전 | 886 | ||
| 6881 | 11년 전 | 4414 | ||
| 6880 | 11년 전 | 1802 | ||
| 6879 |
퍼블리셔지노군
|
11년 전 | 2613 | |
| 6878 | 11년 전 | 545 | ||
| 6877 | 11년 전 | 567 | ||
| 6876 | 11년 전 | 1441 | ||
| 6875 | 11년 전 | 625 | ||
| 6874 | 11년 전 | 1598 | ||
| 6873 | 11년 전 | 1586 | ||
| 6872 | 11년 전 | 4451 | ||
| 6871 |
Abilityarch
|
11년 전 | 959 | |
| 6870 | 11년 전 | 2119 | ||
| 6869 | 11년 전 | 1402 | ||
| 6868 | 11년 전 | 1435 | ||
| 6867 | 11년 전 | 1516 | ||
| 6866 | 11년 전 | 740 | ||
| 6865 | 11년 전 | 1614 | ||
| 6864 | 11년 전 | 460 | ||
| 6863 | 11년 전 | 3743 | ||
| 6862 | 11년 전 | 1845 | ||
| 6861 | 11년 전 | 1641 | ||
| 6860 | 11년 전 | 1281 | ||
| 6859 |
cityman
|
11년 전 | 6803 | |
| 6858 | 11년 전 | 1252 | ||
| 6857 |
의정부아줌마
|
11년 전 | 854 | |
| 6856 | 11년 전 | 2360 | ||
| 6855 | 11년 전 | 1691 | ||
| 6854 | 11년 전 | 815 | ||
| 6853 | 11년 전 | 1204 | ||
| 6852 | 11년 전 | 2590 | ||
| 6851 | 11년 전 | 1955 | ||
| 6850 | 11년 전 | 1784 | ||
| 6849 | 11년 전 | 2072 | ||
| 6848 | 11년 전 | 2348 | ||
| 6847 | 11년 전 | 3125 | ||
| 6846 | 11년 전 | 2711 | ||
| 6845 | 11년 전 | 2799 | ||
| 6844 | 11년 전 | 3506 | ||
| 6843 | 11년 전 | 3257 | ||
| 6842 |
아트291
|
11년 전 | 684 | |
| 6841 | 11년 전 | 4166 | ||
| 6840 | 11년 전 | 5179 | ||
| 6839 | 11년 전 | 885 | ||
| 6838 |
 iwebstory |
11년 전 | 2093 | |
| 6837 | 11년 전 | 1269 | ||
| 6836 |
netdf
|
11년 전 | 605 | |
| 6835 |
 Terrorboy |
11년 전 | 1001 | |
| 6834 | 11년 전 | 665 | ||
| 6833 |
LaRuota |
11년 전 | 2673 | |
| 6832 |
울산굿모닝
|
11년 전 | 1650 | |
| 6831 |
Terrorboy |
11년 전 | 662 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기