Jquery 로 tab(탭) 구현하기 |
개발환경 : window 7 64bit, Internet Explorer 11 |
웹브라우저에서 tab 을 구현하기 쉽지 않다. 그래서 jquery 에서 쉽게
구현할수 있도록 다음과 같은 파일들을 제공해줍니다.
전체파일 다운로드 : 
tab.zip
1 2 3 4 5 | <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 안에 필요한 내용을
넣으면 탭이 클릭되었을 때 내용이 보여지게 되는 것입니다.
1 2 3 4 5 | <li><a href="#fragment-12"><span>네번째</span></a></li><div id="fragment-12"> 네번째 탭</div> |
탭에 대한 옵션은 tabs 로 구현되는데 파라미터를 보게 되면
Slide 여부, 탭클릭후 나타나는 속도 등이 있습니다. 바꿔 가며
테스트 해보시기 바랍니다.
1 2 3 4 5 | <script type="text/javascript"> $(function() { $('#container-5').tabs({ fxSlide: true, fxFade: true, fxSpeed: 'normal' }); });</script> |
이전에 탭을 구현해볼려고 엄청 삽질하고 디자인도 안나와서
고민했었는데 js 몇 개로 해결되니 간단하고 좋네요 .
아래는 전체 소스와 필요한 파일 들입니다.
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | <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> |
반응형
'차근차근 > JQuery Ajax Jstl' 카테고리의 다른 글
| jQuery Cycle Plugin - 이미지 슬라이드 (0) | 2014.12.24 |
|---|---|
| 터치 이미지 슬라이드 (0) | 2014.12.24 |
| hashchange event (0) | 2014.10.28 |
| 이미지 확대 효과 (돋보기 효과) (0) | 2014.10.20 |
| 반응형 웹 - 터치 슬라이드 이미지 (2) | 2014.10.20 |