반응형
|
Jquery 로 tab(탭) 구현하기 |
|
개발환경 : window 7 64bit, Internet Explorer 11 |
웹브라우저에서 tab 을 구현하기 쉽지 않다. 그래서 jquery 에서 쉽게
구현할수 있도록 다음과 같은 파일들을 제공해줍니다.
전체파일 다운로드 : 
tab.zip
<script src="jquery-1.1.3.1.pack.js" type="text/javascript"></script> <script src="jquery.history_remote.pack.js" type="text/javascript"></script> <script src="jquery.tabs.pack.js" type="text/javascript"></script> <link rel="stylesheet" href="jquery.tabs.css" type="text/css" media="print, projection, screen">
결과화면은 아래 그림과 같이 깔끔하게 탭이 구현되어 있습니다.
탭을 추가하고 삭제하는 것은 아주 간단합니다.
소스에서 보는 바와 같이 <li> 를 하나 추가하고 href 연결 아이디를
보여줄 div id 로 해주면 됩니다. 그리고 div 안에 필요한 내용을
넣으면 탭이 클릭되었을 때 내용이 보여지게 되는 것입니다.
<li><a href="#fragment-12"><span>네번째</span></a></li>
<div id="fragment-12">
네번째 탭
</div>
탭에 대한 옵션은 tabs 로 구현되는데 파라미터를 보게 되면
Slide 여부, 탭클릭후 나타나는 속도 등이 있습니다. 바꿔 가며
테스트 해보시기 바랍니다.
<script type="text/javascript">
$(function() {
$('#container-5').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
});
</script>
이전에 탭을 구현해볼려고 엄청 삽질하고 디자인도 안나와서
고민했었는데 js 몇 개로 해결되니 간단하고 좋네요 .
아래는 전체 소스와 필요한 파일 들입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='KO'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Tabs 구현</title>
<script src="jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="jquery.history_remote.pack.js" type="text/javascript"></script>
<script src="jquery.tabs.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.tabs.css" type="text/css" media="print, projection, screen">
<!-- Additional IE/Win specific style sheet (Conditional Comments) -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="jquery.tabs-ie.css" type="text/css" media="projection, screen">
<![endif]-->
<style type="text/css" media="screen, projection">
/* Not required for Tabs, just to make this demo look better... */
body {
font-size: 16px; /* @ EOMB */
}
* html body {
font-size: 100%; /* @ IE */
}
body * {
font-size: 87.5%;
font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
}
body * * {
font-size: 100%;
}
h1 {
margin: 1em 0 1.5em;
font-size: 18px;
}
h2 {
margin: 2em 0 1.5em;
font-size: 16px;
}
p {
margin: 0;
}
pre, pre+p, p+p {
margin: 1em 0 0;
}
code {
font-family: "Courier New", Courier, monospace;
}
</style>
</head>
<body>
<h2>Slide and Fade Effect Combined</h2>
<div id="container-5">
<ul>
<li><a href="#fragment-13"><span>첫번째</span></a></li>
<li><a href="#fragment-14"><span>두번째</span></a></li>
<li><a href="#fragment-15"><span>세번째</span></a></li>
<li><a href="#fragment-12"><span>네번째</span></a></li>
</ul>
<div id="fragment-13">
<p>Use a combined slide and fade effect to switch tabs:</p>
<pre><code>$('#container').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'fast' });</code></pre>
</div>
<div id="fragment-14">
두번째 탭
</div>
<div id="fragment-15">
세번째 탭
</div>
<div id="fragment-12">
네번째 탭
</div>
</div>
<script type="text/javascript">
$(function() {
$('#container-5').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' });
});
</script>
</body>
</html>
반응형
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트(Javascript) 에디터 박스에 링크된 이미지 URL 정보출력하기 (0) | 2014.08.25 |
|---|---|
| 자바스크립트(Javascript) 속도관계 변환, 시속, 분속, 초속, 피트, 노트 계산기 (0) | 2014.08.25 |
| 자바스크립트(Javascript) 입력된 문자열을 암호화 복호화 하기 (1) | 2014.08.24 |
| 크롬에서 자바스크립트(Javascript) 코딩하기 (2) | 2014.08.06 |
| 자바스크립트(Javascript) 로 모바일웹을 표현할 때 해상도에 맞게 표현하기 (0) | 2014.02.24 |
| Easy Slider 를 이용하여 이미지 슬라이더 구현하기 (2) | 2013.06.14 |
| javascript 개발을 위한 Visual Web Developer 2010 Express 설치 (0) | 2012.10.22 |
| Javascript 자바스크립트에서 배열사용하여 프로그램하기 (0) | 2012.09.19 |
