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
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 2330 | 16년 전 | 5072 | ||
| 2329 | 16년 전 | 2307 | ||
| 2328 | 16년 전 | 3404 | ||
| 2327 | 16년 전 | 2641 | ||
| 2326 | 16년 전 | 1562 | ||
| 2325 | 16년 전 | 5362 | ||
| 2324 | 16년 전 | 2474 | ||
| 2323 | 16년 전 | 5969 | ||
| 2322 | 16년 전 | 1942 | ||
| 2321 | 16년 전 | 4019 | ||
| 2320 | 16년 전 | 3033 | ||
| 2319 |
 RINIX |
16년 전 | 2221 | |
| 2318 |
데니크레인
|
16년 전 | 2238 | |
| 2317 | 16년 전 | 4424 | ||
| 2316 | 16년 전 | 3311 | ||
| 2315 | 16년 전 | 2837 | ||
| 2314 | 16년 전 | 2966 | ||
| 2313 | 16년 전 | 2080 | ||
| 2312 | 16년 전 | 1769 | ||
| 2311 | 16년 전 | 1680 | ||
| 2310 | 16년 전 | 1399 | ||
| 2309 | 16년 전 | 1674 | ||
| 2308 | 16년 전 | 1903 | ||
| 2307 | 16년 전 | 1603 | ||
| 2306 |
 heisher |
16년 전 | 4854 | |
| 2305 | 16년 전 | 3830 | ||
| 2304 | 16년 전 | 1790 | ||
| 2303 | 16년 전 | 1534 | ||
| 2302 | 16년 전 | 2274 | ||
| 2301 | 16년 전 | 4537 | ||
| 2300 | 16년 전 | 3569 | ||
| 2299 | 16년 전 | 2590 | ||
| 2298 | 16년 전 | 4364 | ||
| 2297 | 16년 전 | 3232 | ||
| 2296 | 16년 전 | 1374 | ||
| 2295 |
heisher |
16년 전 | 1390 | |
| 2294 |
heisher |
16년 전 | 2050 | |
| 2293 | 16년 전 | 1894 | ||
| 2292 | 16년 전 | 2567 | ||
| 2291 | 16년 전 | 2245 | ||
| 2290 | 16년 전 | 1377 | ||
| 2289 | 16년 전 | 4394 | ||
| 2288 | 16년 전 | 1480 | ||
| 2287 | 16년 전 | 1794 | ||
| 2286 | 16년 전 | 2205 | ||
| 2285 |
RINIX |
16년 전 | 3849 | |
| 2284 |
RINIX |
16년 전 | 2739 | |
| 2283 |
RINIX |
16년 전 | 1497 | |
| 2282 | 16년 전 | 4028 | ||
| 2281 |
 Coolpis |
16년 전 | 1406 | |
| 2280 | 16년 전 | 1593 | ||
| 2279 | 16년 전 | 1254 | ||
| 2278 | 16년 전 | 1715 | ||
| 2277 | 16년 전 | 1619 | ||
| 2276 | 16년 전 | 1629 | ||
| 2275 | 16년 전 | 1428 | ||
| 2274 | 16년 전 | 2189 | ||
| 2273 | 16년 전 | 1842 | ||
| 2272 |
RINIX |
16년 전 | 1990 | |
| 2271 | 16년 전 | 2199 | ||
| 2270 |
a1system
|
16년 전 | 1490 | |
| 2269 | 16년 전 | 2319 | ||
| 2268 | 16년 전 | 2264 | ||
| 2267 | 16년 전 | 4543 | ||
| 2266 |
 TopSchooL |
16년 전 | 1299 | |
| 2265 | 16년 전 | 1057 | ||
| 2264 |
잠자리똥꾸멍
|
16년 전 | 2014 | |
| 2263 |
태양의서쪽
|
16년 전 | 1982 | |
| 2262 |
태양의서쪽
|
16년 전 | 1523 | |
| 2261 |
태양의서쪽
|
16년 전 | 2048 | |
| 2260 |
 똥싼너구리 |
16년 전 | 2279 | |
| 2259 | 16년 전 | 1391 | ||
| 2258 | 16년 전 | 1741 | ||
| 2257 | 16년 전 | 1922 | ||
| 2256 | 16년 전 | 1015 | ||
| 2255 | 16년 전 | 1692 | ||
| 2254 | 16년 전 | 1409 | ||
| 2253 | 16년 전 | 1925 | ||
| 2252 |
freedays
|
16년 전 | 1329 | |
| 2251 | 16년 전 | 2204 | ||
| 2250 | 16년 전 | 1883 | ||
| 2249 | 16년 전 | 5873 | ||
| 2248 | 16년 전 | 1913 | ||
| 2247 | 16년 전 | 3687 | ||
| 2246 | 16년 전 | 1468 | ||
| 2245 |
RINIX |
16년 전 | 1762 | |
| 2244 |
RINIX |
16년 전 | 2077 | |
| 2243 | 16년 전 | 2614 | ||
| 2242 | 16년 전 | 2311 | ||
| 2241 | 16년 전 | 2760 | ||
| 2240 | 16년 전 | 3000 | ||
| 2239 | 16년 전 | 3031 | ||
| 2238 |
똥싼너구리 |
16년 전 | 1828 | |
| 2237 |
똥싼너구리 |
16년 전 | 1542 | |
| 2236 |
똥싼너구리 |
16년 전 | 1419 | |
| 2235 | 16년 전 | 1730 | ||
| 2234 | 16년 전 | 1213 | ||
| 2233 | 16년 전 | 1963 | ||
| 2232 |
똥싼너구리 |
16년 전 | 1737 | |
| 2231 | 16년 전 | 1610 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기