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
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2430 | 15년 전 | 2509 | ||
| 2429 | 15년 전 | 5500 | ||
| 2428 | 15년 전 | 1462 | ||
| 2427 |
Sizkein
|
15년 전 | 4229 | |
| 2426 | 15년 전 | 1356 | ||
| 2425 | 15년 전 | 1655 | ||
| 2424 | 15년 전 | 1632 | ||
| 2423 |
haejuksun
|
15년 전 | 1623 | |
| 2422 |
haejuksun
|
15년 전 | 1127 | |
| 2421 |
haejuksun
|
15년 전 | 1371 | |
| 2420 |
haejuksun
|
15년 전 | 1517 | |
| 2419 |
 프리웹닷컴 |
15년 전 | 1417 | |
| 2418 |
프리웹닷컴 |
15년 전 | 2143 | |
| 2417 |
원더풀라입
|
15년 전 | 1295 | |
| 2416 |
원더풀라입
|
15년 전 | 1350 | |
| 2415 |
원더풀라입
|
15년 전 | 881 | |
| 2414 |
원더풀라입
|
15년 전 | 998 | |
| 2413 |
원더풀라입
|
15년 전 | 962 | |
| 2412 |
원더풀라입
|
15년 전 | 923 | |
| 2411 |
원더풀라입
|
15년 전 | 874 | |
| 2410 |
원더풀라입
|
15년 전 | 926 | |
| 2409 |
원더풀라입
|
15년 전 | 1075 | |
| 2408 |
원더풀라입
|
15년 전 | 1087 | |
| 2407 |
원더풀라입
|
15년 전 | 2609 | |
| 2406 |
원더풀라입
|
15년 전 | 947 | |
| 2405 |
원더풀라입
|
15년 전 | 1602 | |
| 2404 |
원더풀라입
|
15년 전 | 1465 | |
| 2403 | 15년 전 | 1592 | ||
| 2402 | 15년 전 | 1294 | ||
| 2401 |
나도빌더만들까
|
15년 전 | 1776 | |
| 2400 | 15년 전 | 599 | ||
| 2399 | 15년 전 | 1095 | ||
| 2398 | 15년 전 | 1053 | ||
| 2397 | 15년 전 | 2841 | ||
| 2396 | 15년 전 | 3154 | ||
| 2395 | 15년 전 | 1831 | ||
| 2394 | 15년 전 | 1337 | ||
| 2393 |
gamebomb
|
15년 전 | 1962 | |
| 2392 |
gamebomb
|
15년 전 | 1471 | |
| 2391 |
gamebomb
|
15년 전 | 1075 | |
| 2390 | 15년 전 | 3767 | ||
| 2389 |
leadK
|
15년 전 | 1411 | |
| 2388 |
kim7031
|
15년 전 | 1527 | |
| 2387 | 15년 전 | 2739 | ||
| 2386 | 15년 전 | 1452 | ||
| 2385 | 15년 전 | 4172 | ||
| 2384 |
확실한방법
|
15년 전 | 2376 | |
| 2383 |
intel
|
15년 전 | 3153 | |
| 2382 |
확실한방법
|
15년 전 | 1767 | |
| 2381 |
 RINIX |
15년 전 | 1990 | |
| 2380 |
RINIX |
15년 전 | 1302 | |
| 2379 | 15년 전 | 4373 | ||
| 2378 | 15년 전 | 3951 | ||
| 2377 |
메가팩토리
|
15년 전 | 3782 | |
| 2376 | 15년 전 | 5191 | ||
| 2375 | 15년 전 | 3410 | ||
| 2374 | 15년 전 | 1791 | ||
| 2373 | 15년 전 | 1751 | ||
| 2372 | 15년 전 | 1890 | ||
| 2371 | 15년 전 | 1597 | ||
| 2370 | 15년 전 | 3990 | ||
| 2369 | 15년 전 | 2905 | ||
| 2368 | 15년 전 | 2097 | ||
| 2367 | 15년 전 | 1670 | ||
| 2366 | 15년 전 | 1913 | ||
| 2365 | 15년 전 | 2397 | ||
| 2364 | 15년 전 | 1487 | ||
| 2363 | 15년 전 | 2417 | ||
| 2362 | 15년 전 | 1743 | ||
| 2361 | 15년 전 | 1836 | ||
| 2360 | 15년 전 | 1485 | ||
| 2359 | 15년 전 | 2182 | ||
| 2358 | 15년 전 | 1508 | ||
| 2357 |
 JY소프트 |
15년 전 | 1925 | |
| 2356 |
헐크매니아
|
15년 전 | 2119 | |
| 2355 |
WebRIA
|
15년 전 | 1200 | |
| 2354 |
WebRIA
|
15년 전 | 1251 | |
| 2353 |
WebRIA
|
15년 전 | 1893 | |
| 2352 |
WebRIA
|
15년 전 | 5337 | |
| 2351 | 15년 전 | 1636 | ||
| 2350 |
WebRIA
|
15년 전 | 2143 | |
| 2349 | 15년 전 | 2343 | ||
| 2348 |
WebRIA
|
15년 전 | 1493 | |
| 2347 |
WebRIA
|
15년 전 | 1304 | |
| 2346 |
WebRIA
|
15년 전 | 2219 | |
| 2345 |
WebRIA
|
15년 전 | 4936 | |
| 2344 | 15년 전 | 2206 | ||
| 2343 | 15년 전 | 2866 | ||
| 2342 | 15년 전 | 1754 | ||
| 2341 | 15년 전 | 3603 | ||
| 2340 | 15년 전 | 4439 | ||
| 2339 | 16년 전 | 3116 | ||
| 2338 | 16년 전 | 2354 | ||
| 2337 | 16년 전 | 2437 | ||
| 2336 | 16년 전 | 2688 | ||
| 2335 | 16년 전 | 2179 | ||
| 2334 |
Sizkein
|
16년 전 | 5519 | |
| 2333 | 16년 전 | 3372 | ||
| 2332 | 16년 전 | 1364 | ||
| 2331 | 16년 전 | 1700 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기