'Tab Controls' 태그의 글 목록

Tab Controls에 해당되는 글 1건

2009.06.02 jQuery 탭 컨트롤

jQuery 탭 컨트롤

Web 2009. 6. 2. 03:10

얼떨결에 "한번 만들어볼까?" 해서 만들어본 탭 컨트롤.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ko">
                                    <head>
                <script type="text/javascript">if (!window.T) { window.T = {} }
window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":103314,"name":"mocamilk","title":"Keep it simple, Stupid !!!","isDormancy":false,"nickName":"스펜서.","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=http://mocamilk.tistory.com/tag/Tab%2520Controls","DEFAULT_URL":"https://mocamilk.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","ROLE_GROUP":"visitor"};
window.T.entryInfo = null;
window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"};
window.initData = {};

window.TistoryBlog = {
    basePath: "",
    url: "https://mocamilk.tistory.com",
    tistoryUrl: "https://mocamilk.tistory.com",
    manageUrl: "https://mocamilk.tistory.com/manage",
    token: "XHHmxWRyDtbxvnCHiwIK7hjHtQWvQoPz6rrnELbfDIRJaAP8lPn3EvWqGuTAbGx8"
};
var servicePath = "";
var blogURL = "";</script>

.selectedMenu { background-color:#ffffff; color:#222222}
			.nonSelectedMenu {  border-bottom:1px solid #d0d0d0; }
			.leftBorder { border-left:1px solid #d0d0d0; }
			.rightBorder { border-right:1px solid #d0d0d0; }
		/*]]>*/
		</style>
		<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				$("td.tabControlMenu").hover(
					function(){
						$(this).addClass("tabContentMenuHover");
					}, 
					function(){
						$(this).removeClass("tabContentMenuHover");
					}
				);

// 메뉴 클릭 설정
				$("td.tabControlMenu").click(function(){
					var id = $(this).attr("id").replace("m", "");
					$("div.tabContent").each(function(){
						$(this).css("display", "none");
					});

$("td.tabControlMenu").each(function(){
						if($(this).hasClass("selectedMenu"))
							$(this).removeClass("selectedMenu");
						$(this).addClass("nonSelectedMenu");

$(this).removeClass("leftBorder");
						$(this).removeClass("rightBorder");
					});
					$(this).removeClass("nonSelectedMenu");
					$(this).addClass("selectedMenu");

var maxMenu = $(this).parent().find(".tabControlMenu").length;

if(id == 1)
						$(this).addClass("rightBorder");
					else if(id == maxMenu)
						$(this).addClass("leftBorder");
					else
					{
						$(this).addClass("leftBorder");
						$(this).addClass("rightBorder");
					}

//$("div#tabContent"+id).css("display", "block");
					//$("div#tabContent"+id).show("slow");
					$("div#tabContent"+id).fadeIn("slow");
				});

$("td#m1").click();
			});
		//]]>
		</script>
	
                <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-6e43216ad1ef9e879370e963df8ee6b7af21767a/static/style/revenue.css"/>
<link rel="canonical" href="https://mocamilk.tistory.com"/>

<script type="application/ld+json">
    {"@context":"http://schema.org","@type":"WebSite","url":"/","potentialAction":{"@type":"SearchAction","target":"/search/{search_term_string}","query":"required name=search_term_string"}}
</script>

<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-6e43216ad1ef9e879370e963df8ee6b7af21767a/static/style/dialog.css"/>
<link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-6e43216ad1ef9e879370e963df8ee6b7af21767a/static/style/postBtn.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-6e43216ad1ef9e879370e963df8ee6b7af21767a/static/style/comment.css"/>
<link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-6e43216ad1ef9e879370e963df8ee6b7af21767a/static/style/tistory.css"/>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-6e43216ad1ef9e879370e963df8ee6b7af21767a/static/script/common.js"></script>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-6e43216ad1ef9e879370e963df8ee6b7af21767a/static/script/comment.js" defer=""></script>

</head>
    <body>
        <div id="tabControl" class="tabControl">	
			<table class="tabControlMenuHead" cellspacing="0" cellpadding="0">
				<tr>
					<td id="m1" class="tabControlMenu">서시</td>
					<td id="m2" class="tabControlMenu">참회록</td>
					<td id="m3" class="tabControlMenu">또 다른 고향</td>
				</tr>
			</table>
			<div id="tabContent1" class="tabContent">
				죽는 날까지 하늘을 우러러<br/>
				한 점 부끄럼이 없기를<br/>
				잎새에 이는 바람에도<br/>
				나는 괴로워했다.<br/>
				별을 노래하는 마음으로<br/>
				모두 죽어가는 것을 사랑해야지.<br/>
				그리고 나에게 주어진 길을<br/>
				걸어가야겠다<br/>
				<br/><br/>
				오늘 밤에도 별이 바람에 스치운다
			</div>
			<div id="tabContent2" class="tabContent">
				파란 녹이 낀 구리 거울 속에<br/>
				내 얼굴이 남아 있는 것은<br/>
				어느 왕조의 유물이기에<br/>
				이다지도 욕될까.<br/>
				<br/><br/>
				나는 나의 참회의 글을 한 줄에 줄이자.<br/>
				ㅡ 만 이십 사 년 일 개월을<br/>
				무슨 기쁨을 바라 살아왔던가.<br/>
				<br/><br/>
				내일이나 모레나 그 어느 즐거운 날에<br/>
				나는 또 한 줄의 참회록을 써야 한다.<br/>
				<br/><br/>
				밤이면 밤마다 나의 거울을<br/>
				손바닥으로 발바닥으로 닦아 보자.<br/>
				<br/><br/>
				그러면 어느 운석 밑으로 홀로 걸어가는<br/>
				슬픈 사람의 뒷모양이 거울 속에 나타나 온다
			</div>
			<div id="tabContent3" class="tabContent">
				故鄕(고향)에 돌아온 날 밤에<br/>
				내 白骨(백골)이 따라와 한 방에 누웠다.<br/>
				<br/><br/>
				어둔 방은 宇宙(우주)로 통하고<br/>
				하늘에선가 소리처럼 바람이 불어온다.<br/>
				<br/><br/>
				어둠 속에서 곱게 風化作用(풍화작용)하는<br/>
				白骨(백골)을 들여다보며<br/>
				눈물짓는 것이 내가 우는 것이냐<br/>
				白骨(백골)이 우는 것이냐<br/>
				아름다운 혼이 우는 것이냐<br/>
				<br/><br/>
				志操(지조) 높은 개는<br/>
				밤을 새워 어둠을 짖는다.<br/>
				<br/><br/>
				어둠을 짖는 개는<br/>
				나를 쫓는 것일 게다.<br/>
				<br/><br/>
				가자 가자<br/>
				쫓기우는 사람처럼 가자.<br/>
				白骨(백골) 몰래<br/>
				아름다운 또 다른 故鄕(고향)에 가자
			</div>
		</div>
    
                <script type="text/javascript">(function($) {
    $(document).ready(function() {
        lightbox.options.fadeDuration = 200;
        lightbox.options.resizeDuration = 200;
        lightbox.options.wrapAround = false;
        lightbox.options.albumLabel = "%1 / %2";
    })
})(tjQuery);</script>
<div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-6e43216ad1ef9e879370e963df8ee6b7af21767a/static/script/common.js"></script>
<script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script>
<script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-6e43216ad1ef9e879370e963df8ee6b7af21767a/static/script/menubar.min.js"></script>

</body>
</html>

jQuery 하면 할수록 재미있는거 같아!!!

첨부된 파일은 소스코드이다.

tabControl.html

저작자표시 비영리 동일조건

posted by 스펜서.

이전 1 다음

Keep it simple, Stupid !!!

검색결과 리스트

Tab Controls에 해당되는 글 1건

글

jQuery 탭 컨트롤

설정

트랙백

댓글

CATEGORY

TAG

RECENT POSTS

RECENT COMMENT

NOTICE

MY LINK

ARCHIVE

calendar

검색

COUNTER

티스토리툴바

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31