차근차근/JQuery Ajax Jstl

Jquery 로 tab(탭) 구현하기

예쁜꽃이피었으면 2014. 11. 14. 11:52

http://mainia.tistory.com/780


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
<!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>


반응형
저작자표시 비영리

'차근차근 > 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

'차근차근/JQuery Ajax Jstl'의 다른글

  • 현재글Jquery 로 tab(탭) 구현하기

관련글

댓글

티스토리툴바