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개
17년 전
관련된 업데이트 있습니다.
간혹일어나는 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
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2230 | 16년 전 | 1294 | ||
| 2229 | 16년 전 | 2163 | ||
| 2228 | 16년 전 | 3228 | ||
| 2227 | 16년 전 | 2173 | ||
| 2226 | 16년 전 | 1756 | ||
| 2225 | 16년 전 | 1519 | ||
| 2224 |
 ideaman |
16년 전 | 2049 | |
| 2223 | 16년 전 | 4736 | ||
| 2222 | 16년 전 | 1417 | ||
| 2221 |
 RINIX |
16년 전 | 2151 | |
| 2220 |
RINIX |
16년 전 | 2141 | |
| 2219 |
RINIX |
16년 전 | 2409 | |
| 2218 |
RINIX |
16년 전 | 2153 | |
| 2217 |
RINIX |
16년 전 | 4441 | |
| 2216 |
RINIX |
16년 전 | 2932 | |
| 2215 | 16년 전 | 2871 | ||
| 2214 | 16년 전 | 1607 | ||
| 2213 | 16년 전 | 1253 | ||
| 2212 |
RINIX |
16년 전 | 3956 | |
| 2211 |
RINIX |
16년 전 | 1624 | |
| 2210 |
RINIX |
16년 전 | 1622 | |
| 2209 | 16년 전 | 2117 | ||
| 2208 | 16년 전 | 1888 | ||
| 2207 |
letsgolee
|
16년 전 | 1500 | |
| 2206 |
RINIX |
16년 전 | 3929 | |
| 2205 | 16년 전 | 1768 | ||
| 2204 | 16년 전 | 3145 | ||
| 2203 | 16년 전 | 3030 | ||
| 2202 | 16년 전 | 1055 | ||
| 2201 | 16년 전 | 1848 | ||
| 2200 | 16년 전 | 1601 | ||
| 2199 |
 MindMap |
16년 전 | 1862 | |
| 2198 |
태양의서쪽
|
16년 전 | 2658 | |
| 2197 |
태양의서쪽
|
16년 전 | 3033 | |
| 2196 |
태양의서쪽
|
17년 전 | 3233 | |
| 2195 | 17년 전 | 3333 | ||
| 2194 | 17년 전 | 1475 | ||
| 2193 |
letsgolee
|
17년 전 | 1430 | |
| 2192 | 17년 전 | 2261 | ||
| 2191 | 17년 전 | 1981 | ||
| 2190 |
 cmpanel |
17년 전 | 2293 | |
| 2189 | 17년 전 | 2814 | ||
| 2188 |
Sizkein
|
17년 전 | 3263 | |
| 2187 |
letsgolee
|
17년 전 | 2362 | |
| 2186 |
Sizkein
|
17년 전 | 1639 | |
| 2185 |
Sizkein
|
17년 전 | 3213 | |
| 2184 |
Sizkein
|
17년 전 | 3067 | |
| 2183 | 17년 전 | 3042 | ||
| 2182 | 17년 전 | 3924 | ||
| 2181 | 17년 전 | 2591 | ||
| 2180 |
 skinartisanCOM |
17년 전 | 2413 | |
| 2179 | 17년 전 | 2656 | ||
| 2178 | 17년 전 | 2907 | ||
| 2177 | 17년 전 | 2621 | ||
| 2176 | 17년 전 | 1458 | ||
| 2175 | 17년 전 | 1900 | ||
| 2174 | 17년 전 | 1501 | ||
| 2173 |
skinartisanCOM |
17년 전 | 1927 | |
| 2172 | 17년 전 | 2529 | ||
| 2171 | 17년 전 | 8711 | ||
| 2170 | 17년 전 | 3166 | ||
| 2169 | 17년 전 | 4252 | ||
| 2168 |
cmpanel |
17년 전 | 1995 | |
| 2167 | 17년 전 | 3663 | ||
| 2166 |
cmpanel |
17년 전 | 1562 | |
| 2165 | 17년 전 | 1392 | ||
| 2164 | 17년 전 | 2331 | ||
| 2163 | 17년 전 | 1322 | ||
| 2162 | 17년 전 | 1645 | ||
| 2161 | 17년 전 | 1463 | ||
| 2160 | 17년 전 | 2533 | ||
| 2159 |
inxps
|
17년 전 | 1507 | |
| 2158 |
inxps
|
17년 전 | 1101 | |
| 2157 | 17년 전 | 1234 | ||
| 2156 | 17년 전 | 3113 | ||
| 2155 | 17년 전 | 2184 | ||
| 2154 | 17년 전 | 1984 | ||
| 2153 |
 똥싼너구리 |
17년 전 | 1227 | |
| 2152 |
letsgolee
|
17년 전 | 2459 | |
| 2151 | 17년 전 | 1177 | ||
| 2150 |
아름다운세상
|
17년 전 | 1133 | |
| 2149 |
아름다운세상
|
17년 전 | 1381 | |
| 2148 |
아름다운세상
|
17년 전 | 2745 | |
| 2147 |
 넥스트스텝 |
17년 전 | 2402 | |
| 2146 | 17년 전 | 2490 | ||
| 2145 | 17년 전 | 1191 | ||
| 2144 | 17년 전 | 1308 | ||
| 2143 | 17년 전 | 3256 | ||
| 2142 | 17년 전 | 2842 | ||
| 2141 | 17년 전 | 4114 | ||
| 2140 | 17년 전 | 2261 | ||
| 2139 | 17년 전 | 2351 | ||
| 2138 | 17년 전 | 1405 | ||
| 2137 | 17년 전 | 2519 | ||
| 2136 | 17년 전 | 2203 | ||
| 2135 | 17년 전 | 2963 | ||
| 2134 |
아름다운세상
|
17년 전 | 2473 | |
| 2133 |
Juinjang
|
17년 전 | 1638 | |
| 2132 | 17년 전 | 2435 | ||
| 2131 | 17년 전 | 1593 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기