jquery 코어로 구현된 탭 소스 + 쿠키 제어
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>
<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에서 이동 됨]
|
댓글을 작성하시려면 로그인이 필요합니다.
프로그램
태그 필터 (최대 3개)
전체
개발자
소스
기타
mysql
팁자료실
javascript
php
linux
flash
정규표현식
jquery
node.js
mobile
웹서버
os
프로그램
강좌
썸네일
이미지관련
도로명주소
그누보드5
기획자
견적서
계약서
기획서
마케팅
제안서
seo
통계
서식
통계자료
퍼블리셔
html
css
반응형
웹접근성
퍼블리싱
표준화
반응형웹
홈페이지기초
부트스트랩
angularjs
포럼
스크린리더
센스리더
개발자톡
개발자팁
퍼블리셔톡
퍼블리셔팁
기획자톡
기획자팁
프로그램강좌
퍼블리싱강좌
댓글 1개
간혹일어나는 sleep 방지를 위해 setTimeout 넣었습니다.
버튼옆에 preloading 이미지 넣었습니다.
http://tottoe.com/template/customer/mypage.php test 0000
http://tottoe.com/bbs/board.php?bo_table=pds&wr_id=84