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
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2030 | 17년 전 | 2785 | ||
| 2029 | 17년 전 | 1592 | ||
| 2028 | 17년 전 | 1343 | ||
| 2027 | 17년 전 | 1606 | ||
| 2026 |
진정한승리
|
17년 전 | 2518 | |
| 2025 | 17년 전 | 1732 | ||
| 2024 | 17년 전 | 2013 | ||
| 2023 | 17년 전 | 1301 | ||
| 2022 |
SE7EN
|
17년 전 | 1036 | |
| 2021 | 17년 전 | 1123 | ||
| 2020 | 17년 전 | 2924 | ||
| 2019 | 17년 전 | 2463 | ||
| 2018 | 17년 전 | 2044 | ||
| 2017 | 17년 전 | 2047 | ||
| 2016 | 17년 전 | 1793 | ||
| 2015 | 17년 전 | 2241 | ||
| 2014 | 17년 전 | 2012 | ||
| 2013 | 17년 전 | 1984 | ||
| 2012 | 17년 전 | 1866 | ||
| 2011 | 17년 전 | 1204 | ||
| 2010 | 17년 전 | 1820 | ||
| 2009 | 17년 전 | 2223 | ||
| 2008 | 17년 전 | 2295 | ||
| 2007 | 17년 전 | 1638 | ||
| 2006 |
Arone
|
17년 전 | 1505 | |
| 2005 |
 저시키알바 |
17년 전 | 1353 | |
| 2004 | 17년 전 | 2572 | ||
| 2003 |
suerte
|
17년 전 | 2669 | |
| 2002 |
suerte
|
17년 전 | 2069 | |
| 2001 |
suerte
|
17년 전 | 2416 | |
| 2000 |
 미스코리아 |
17년 전 | 2721 | |
| 1999 |
미스코리아 |
17년 전 | 1323 | |
| 1998 |
 드러머찰스 |
17년 전 | 1188 | |
| 1997 | 17년 전 | 6320 | ||
| 1996 | 17년 전 | 1175 | ||
| 1995 | 17년 전 | 1626 | ||
| 1994 | 17년 전 | 1775 | ||
| 1993 | 17년 전 | 1096 | ||
| 1992 | 17년 전 | 1186 | ||
| 1991 | 17년 전 | 1888 | ||
| 1990 |
sdjsu
|
17년 전 | 1517 | |
| 1989 | 17년 전 | 3613 | ||
| 1988 |
smilesol
|
17년 전 | 1201 | |
| 1987 |
 도투꿀꿀이 |
17년 전 | 1903 | |
| 1986 | 17년 전 | 1164 | ||
| 1985 | 17년 전 | 1380 | ||
| 1984 | 17년 전 | 2358 | ||
| 1983 | 17년 전 | 2009 | ||
| 1982 | 17년 전 | 1033 | ||
| 1981 | 17년 전 | 1034 | ||
| 1980 | 17년 전 | 1085 | ||
| 1979 |
오렌지76
|
17년 전 | 6041 | |
| 1978 |
오렌지76
|
17년 전 | 5843 | |
| 1977 | 17년 전 | 2025 | ||
| 1976 |
없어씨바라
|
17년 전 | 1020 | |
| 1975 | 17년 전 | 1111 | ||
| 1974 | 17년 전 | 2077 | ||
| 1973 | 17년 전 | 1507 | ||
| 1972 | 17년 전 | 1151 | ||
| 1971 |
smilesol
|
17년 전 | 1180 | |
| 1970 | 17년 전 | 1124 | ||
| 1969 |
smilesol
|
17년 전 | 1050 | |
| 1968 |
소행성블루
|
17년 전 | 3962 | |
| 1967 |
소행성블루
|
17년 전 | 2174 | |
| 1966 | 17년 전 | 1628 | ||
| 1965 |
소행성블루
|
17년 전 | 2763 | |
| 1964 |
고양Ol아빠
|
17년 전 | 1467 | |
| 1963 | 17년 전 | 1150 | ||
| 1962 | 17년 전 | 1168 | ||
| 1961 |
choijinhee
|
17년 전 | 1239 | |
| 1960 | 17년 전 | 1122 | ||
| 1959 | 17년 전 | 1241 | ||
| 1958 |
하이웹솔루션
|
17년 전 | 2398 | |
| 1957 | 17년 전 | 4187 | ||
| 1956 | 17년 전 | 1187 | ||
| 1955 | 17년 전 | 3947 | ||
| 1954 | 17년 전 | 4098 | ||
| 1953 | 17년 전 | 1216 | ||
| 1952 | 17년 전 | 2171 | ||
| 1951 | 17년 전 | 1617 | ||
| 1950 | 17년 전 | 3210 | ||
| 1949 | 17년 전 | 1354 | ||
| 1948 | 17년 전 | 3604 | ||
| 1947 | 17년 전 | 3401 | ||
| 1946 | 17년 전 | 2569 | ||
| 1945 | 17년 전 | 2934 | ||
| 1944 | 17년 전 | 2624 | ||
| 1943 | 17년 전 | 1944 | ||
| 1942 | 17년 전 | 3308 | ||
| 1941 | 17년 전 | 2623 | ||
| 1940 | 17년 전 | 3518 | ||
| 1939 |
 r3load |
17년 전 | 1144 | |
| 1938 | 17년 전 | 2245 | ||
| 1937 | 17년 전 | 1318 | ||
| 1936 |
smilesol
|
17년 전 | 1184 | |
| 1935 |
AHEEZII
|
17년 전 | 1057 | |
| 1934 |
smilesol
|
17년 전 | 1042 | |
| 1933 | 17년 전 | 1417 | ||
| 1932 | 17년 전 | 2854 | ||
| 1931 | 17년 전 | 3250 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기