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
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2130 | 17년 전 | 1189 | ||
| 2129 |
ⓧ힘내세요
|
17년 전 | 2245 | |
| 2128 | 17년 전 | 2878 | ||
| 2127 | 17년 전 | 4061 | ||
| 2126 | 17년 전 | 3147 | ||
| 2125 | 17년 전 | 1409 | ||
| 2124 | 17년 전 | 1708 | ||
| 2123 | 17년 전 | 2239 | ||
| 2122 | 17년 전 | 1547 | ||
| 2121 | 17년 전 | 1726 | ||
| 2120 | 17년 전 | 2724 | ||
| 2119 | 17년 전 | 2147 | ||
| 2118 | 17년 전 | 1801 | ||
| 2117 |
아름다운세상
|
17년 전 | 4208 | |
| 2116 | 17년 전 | 3050 | ||
| 2115 | 17년 전 | 1438 | ||
| 2114 |
아름다운세상
|
17년 전 | 3577 | |
| 2113 | 17년 전 | 2801 | ||
| 2112 | 17년 전 | 2078 | ||
| 2111 | 17년 전 | 1296 | ||
| 2110 | 17년 전 | 2337 | ||
| 2109 | 17년 전 | 2072 | ||
| 2108 | 17년 전 | 1993 | ||
| 2107 |
휴전합시다
|
17년 전 | 1926 | |
| 2106 | 17년 전 | 1173 | ||
| 2105 |
 skinartisanCOM |
17년 전 | 1873 | |
| 2104 | 17년 전 | 2930 | ||
| 2103 | 17년 전 | 1435 | ||
| 2102 | 17년 전 | 1673 | ||
| 2101 | 17년 전 | 1358 | ||
| 2100 | 17년 전 | 1605 | ||
| 2099 | 17년 전 | 1579 | ||
| 2098 | 17년 전 | 1447 | ||
| 2097 | 17년 전 | 2569 | ||
| 2096 | 17년 전 | 2332 | ||
| 2095 | 17년 전 | 2115 | ||
| 2094 | 17년 전 | 1425 | ||
| 2093 | 17년 전 | 2439 | ||
| 2092 | 17년 전 | 4265 | ||
| 2091 | 17년 전 | 2754 | ||
| 2090 | 17년 전 | 1669 | ||
| 2089 | 17년 전 | 1859 | ||
| 2088 | 17년 전 | 3243 | ||
| 2087 | 17년 전 | 2237 | ||
| 2086 | 17년 전 | 3835 | ||
| 2085 | 17년 전 | 1682 | ||
| 2084 | 17년 전 | 2287 | ||
| 2083 | 17년 전 | 2110 | ||
| 2082 | 17년 전 | 1617 | ||
| 2081 | 17년 전 | 2129 | ||
| 2080 |
letsgolee
|
17년 전 | 1922 | |
| 2079 | 17년 전 | 1962 | ||
| 2078 | 17년 전 | 3077 | ||
| 2077 | 17년 전 | 2153 | ||
| 2076 | 17년 전 | 1444 | ||
| 2075 | 17년 전 | 1464 | ||
| 2074 | 17년 전 | 2136 | ||
| 2073 | 17년 전 | 3207 | ||
| 2072 | 17년 전 | 2145 | ||
| 2071 |
휴전합시다
|
17년 전 | 1537 | |
| 2070 | 17년 전 | 4253 | ||
| 2069 | 17년 전 | 2046 | ||
| 2068 | 17년 전 | 3471 | ||
| 2067 | 17년 전 | 6043 | ||
| 2066 | 17년 전 | 1489 | ||
| 2065 |
letsgolee
|
17년 전 | 1657 | |
| 2064 | 17년 전 | 1235 | ||
| 2063 | 17년 전 | 1352 | ||
| 2062 |
vicky
|
17년 전 | 2880 | |
| 2061 | 17년 전 | 1912 | ||
| 2060 |
카프카07
|
17년 전 | 2597 | |
| 2059 | 17년 전 | 1311 | ||
| 2058 | 17년 전 | 3188 | ||
| 2057 | 17년 전 | 2168 | ||
| 2056 | 17년 전 | 2615 | ||
| 2055 | 17년 전 | 1412 | ||
| 2054 | 17년 전 | 1761 | ||
| 2053 | 17년 전 | 1153 | ||
| 2052 |
 JCrew |
17년 전 | 1212 | |
| 2051 | 17년 전 | 1796 | ||
| 2050 | 17년 전 | 1235 | ||
| 2049 | 17년 전 | 4320 | ||
| 2048 | 17년 전 | 1518 | ||
| 2047 | 17년 전 | 2017 | ||
| 2046 |
카프카07
|
17년 전 | 7099 | |
| 2045 | 17년 전 | 1390 | ||
| 2044 | 17년 전 | 1911 | ||
| 2043 | 17년 전 | 3140 | ||
| 2042 | 17년 전 | 1232 | ||
| 2041 |
카프카07
|
17년 전 | 1993 | |
| 2040 | 17년 전 | 1169 | ||
| 2039 |
smilesol
|
17년 전 | 1866 | |
| 2038 | 17년 전 | 2169 | ||
| 2037 |
skinartisanCOM |
17년 전 | 2980 | |
| 2036 | 17년 전 | 1258 | ||
| 2035 |
 smyada |
17년 전 | 1346 | |
| 2034 |
ㅣ곰탱이ㅣ
|
17년 전 | 1570 | |
| 2033 |
 허리손반장 |
17년 전 | 1235 | |
| 2032 | 17년 전 | 4363 | ||
| 2031 | 17년 전 | 3911 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기