'Javascript 예제'에 해당되는 글 12건

  1. 2018.10.12 jQuery 로 탭 만들어 보기
  2. 2018.06.26 Javascript 로 초성검색하기
  3. 2014.10.15 jQuery 로 탭메뉴를 맹글어 보아요~ 8
  4. 2014.04.29 네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기
  5. 2014.04.10 jQuery 로 탭메뉴 보였다 안보였다 맹글기 3

jQuery 로 탭 만들어 보기

Javascript 예제 2018. 10. 12. 16:50

예제 소스 다운로드

tab.zip


on, off 이미지로 탭 만들기 (요즘은 거의 이렇게 안 쓰지만 불가피하게 쓸 경우가 있는것 같아서..)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>탭</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/js/jquery-3.3.1.min.js"></script>
 
    <style>
        .tabs a {cursor: pointer;}
    </style>
</head>
<body>
    <!-- 탭1 -->
    <div>
        <div class="tabs">
            <a><img src="/img/tab_service01_off.gif"></a>
            <a><img src="/img/tab_service02_off.gif"></a>
        </div>
 
        <div class="panel">탭1 첫번째 패널<br/><br/><br/><br/><br/><br/><br/><br/><br/>끝</div>
        <div class="panel">탭1 두번째 패널<br/><br/><br/><br/>끝</div>
    </div>
 
    <!-- 탭2 -->
    <div>
        <div class="tabs">
            <a><img src="/img/tab_service01_off.gif"></a>
            <a><img src="/img/tab_service02_off.gif"></a>
            <a><img src="/img/tab_service02_off.gif"></a>
        </div>
 
        <div class="panel">탭2 첫번째 패널<br/><br/><br/><br/><br/><br/><br/><br/><br/>끝</div>
        <div class="panel">탭2 두번째 패널<br/><br/><br/><br/>끝</div>
        <div class="panel">탭2 세번째 패널<br/><br/><br/><br/>끝</div>
    </div>
 
    <script>
        $(".tabs").each(function(){
            var tabs = $(this).find("a");               // 탭버튼
            var panels = $(this).nextAll(".panel");     // 탭패널
     
            tabs.on("click", function(){
                var clk = $(this);
                var idx = tabs.index(clk);  // 클릭한 index
                 
                // 모든 패널을 안보이게 한다음 클릭한 idx 에 해당하는 패널만 보이게
                panels.hide();
                panels.eq(idx).show();
     
                // 모든 탭 이미지를 off 이미지로 바꿈
                tabs.find("img").each(function(){
                    var img = $(this);
                    var new_src = img.attr("src").replace("_on", "_off");
                    img.attr("src", new_src);
                });
     
                // 클릭한 idx 해당하는 이미지만 on 이미지로 바꿈
                var img = tabs.eq(idx).find("img");
                var new_src = img.attr("src").replace("_off", "_on");
                img.attr("src", new_src);
            });
     
            // 첫번째 탭 클릭처리
            tabs.eq(0).click();
        });
    </script>
</body>
</html>



이미지 대신 class 로 간단하게 on/off 탭메뉴 만들기

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>탭</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/js/jquery-3.3.1.min.js"></script>
 
    <style>
        .tabs a { background:#666; color:#fff; font-weight:bold; padding:10px;
                  border:solid 2px #fff;  display:inline-block; width:200px;
                  text-align: center; cursor: pointer;  }
        .tabs a:hover { background:#c00; }
        .tabs a.on { background:#c00; }
    </style>
</head>
<body>
    <div>
        <!-- 탭1 -->
        <div class="tabs">
            <a>첫번째메뉴</a>
            <a>두번째메뉴</a>
        </div>
 
        <div class="panel">첫번째 패널<br/><br/><br/><br/><br/><br/><br/><br/><br/>끝</div>
        <div class="panel">두번째 패널<br/><br/><br/><br/>끝</div>
    </div>
 
    <div>
        <!-- 탭2 -->
        <div class="tabs">
            <a>첫번째메뉴</a>
            <a>두번째메뉴</a>
            <a>세번째메뉴</a>
        </div>
 
        <div class="panel">첫번째 패널<br/><br/><br/><br/><br/><br/><br/><br/><br/>끝</div>
        <div class="panel">두번째 패널<br/><br/><br/><br/>끝</div>
        <div class="panel">세번째 패널<br/><br/><br/><br/>끝</div>
    </div>
 
    <script>
        $(".tabs").each(function(){
            var tabs = $(this).find("a");
            var panels = $(this).nextAll(".panel");
     
            tabs.on("click", function(){
                var clk = $(this);
                var idx = tabs.index(clk);
                 
                // 아래쪽 탭 패널을 싹 안보이게 한다음 클릭한 순서에 해당하는 탭패널만 보여지게
                panels.hide();
                panels.eq(idx).show();
     
                // on 클래스를 싹 빼고 클릭한 a 에 on 클래스 추가
                tabs.removeClass("on");
                tabs.eq(idx).addClass("on");
            });
     
            tabs.eq(0).click();
        });
    </script>
</body>
</html>


저작자표시 비영리 변경금지

'Javascript 예제' 카테고리의 다른 글

Javascript 로 초성검색하기  (0) 2018.06.26
jQuery 로 탭메뉴를 맹글어 보아요~  (8) 2014.10.15
네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기  (0) 2014.04.29
jQuery 로 탭메뉴 보였다 안보였다 맹글기  (3) 2014.04.10
jQuery로 Outer HTML 가져오기  (2) 2012.11.06
Posted by 스토브

Javascript 로 초성검색하기

Javascript 예제 2018. 6. 26. 13:25


어떤 훌륭한 분이 한글을 분리해주는 라이브러리를 맨들어줘서 그분의 라이브러리를 활용한 초성 검색 예제를 만들어 보았다.


라이브러리 : https://github.com/e-/Hangul.js/


검색어 : ex) ㅎㄱ or 한국


    코드

    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
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script type="text/javascript" src="./hangul.min.js"></script>
    </head>
    <body>
        검색어 : <input type="text" id="txt" />
        <ul id="find"></ul>
     
        <script>
            // 검색할 배열
            var arr = [
                { name: "홍길동" },
                { name: "한국" },
                { name: "호가든" },
                { name: "프로그램목록" },
                { name: "프로세스" },
                { name: "공통" },
                { name: "아키텍쳐" },
                { name: "앙칼지다" },
                { name: "학사행정" },
                { name: "일반부속" },
                { name: "학습 및 취업" },
                { name: "테이블정의서" },
                { name: "테이저건" },
                { name: "정의서" },
                { name: "현행화" },
                { name: "졸업" },
                { name: "바인더" },
                { name: "대학본부" },
                { name: "에디터" },
                { name: "Visual Studio Code" },
                { name: "Edit Plus" },
                { name: "소나무" },
                { name: "민들레" },
                { name: "나뭇가지" },
                { name: "갑천" },
                { name: "한강" },
                { name: "금강" },
                { name: "도안동" },
                { name: "월평동" },
                { name: "대전광역시" },
                { name: "서울" },
                { name: "경기도" },
                { name: "성남시" },
                { name: "모니터" },
                { name: "이클립스" },
                { name: "탐색기" },
                { name: "엑셀" },
                { name: "크롬" },
                { name: "파이어폭스" },
                { name: "텔레그램" },
                { name: "팟플레이어" },
                { name: "마이크로소프트" },
                { name: "애플" },
                { name: "LG" },
                { name: "삼성" },
                { name: "오라클" },
                { name: "MySQL" },
                { name: "치약" },
                { name: "프린터" },
                { name: "레이저 프린터" },
                { name: "아반떼" },
                { name: "베라크루즈" },
                { name: "자동차공학과" },
                { name: "기아자동차" },
                { name: "현대자동차" },
                { name: "에어컨" }
            ];
     
            // object 에 초성필드 추가 {name:"홍길동", diassembled:"ㅎㄱㄷ"}
            arr.forEach(function (item) {
                var dis = Hangul.disassemble(item.name, true);
                var cho = dis.reduce(function (prev, elem) {
                    elem = elem[0] ? elem[0] : elem;
                    return prev + elem;
                }, "");
                item.diassembled = cho;
            });
     
            console.log(arr);
     
     
            var ul = document.getElementById('find');
            document.getElementById('txt').addEventListener('keyup', function () {
                while (ul.firstChild) {
                    ul.removeChild(ul.firstChild);
                }
     
                var search = this.value;
                var search1 = Hangul.disassemble(search).join("");  // ㄺ=>ㄹㄱ
     
     
                arr
                // 문자열 검색 || 초성검색
                .filter(function (item) {
                    return item.name.includes(search) || item.diassembled.includes(search1);
                })
                // 검색결과 ul 아래에 li 로 추가
                .forEach(function (item) {
                    var li = document.createElement('li');
                    li.innerHTML = item.name;
     
                    ul.appendChild(li);
                });
            });
        </script>
    </body>
    </html>


    저작자표시 비영리 변경금지

    'Javascript 예제' 카테고리의 다른 글

    jQuery 로 탭 만들어 보기  (0) 2018.10.12
    jQuery 로 탭메뉴를 맹글어 보아요~  (8) 2014.10.15
    네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기  (0) 2014.04.29
    jQuery 로 탭메뉴 보였다 안보였다 맹글기  (3) 2014.04.10
    jQuery로 Outer HTML 가져오기  (2) 2012.11.06
    Posted by 스토브

    jQuery 로 탭메뉴를 맹글어 보아요~

    Javascript 예제 2014. 10. 15. 16:31


    최종적으로 맹글어질건 아래와 같은, 사이트 메인화면 중간중간에 들어가는 탭메뉴들이다.(클릭하면 클릭됨)


    html

    ※ 버튼의 롤오버 이미지 파일명은 ***_on.* ***_off.* 요렇게 해야 클릭했을때 이미지가 바뀐다.

    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
    <div class="tabmenu">
        <h2>첫번째 탭메뉴</h2> 
     
        <ul>
            <li><a href="#link"><img src="img/menu_01_off.gif" alt="메뉴01" /></a>
                <ul class="tabcontent">
                    <li><a href="#">1 제목이 나오는부분.....</a></li>
                    <li><a href="#">2 제목이 나오는부분.....</a></li>
                </ul>
                <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
            </li>
            <li><a href="#link"><img src="img/menu_02_off.gif" alt="메뉴02" /></a>
                <ul class="tabcontent">
                    <li><a href="#">무우우우우우우우.....</a></li>
                    <li><a href="#">5무우우우우우우우ㄴ.....</a></li>
                </ul>
                <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
            </li>
                <li><a href="#link"><img src="img/menu_03_off.gif" alt="메뉴03" /></a>
                <ul class="tabcontent">  
                    <li><a href="#">요농이 요느마</a></li>
                    <li><a href="#">요농이 요느마</a></li>
                </ul>      
                <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
            </li>
            <li><a href="#link"><img src="img/menu_04_off.gif" alt="메뉴04" /></a>
                <ul class="tabcontent">
                    <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                    <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                </ul>
                <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
            </li>
        </ul>
    </div>




    css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
        .tabmenu {position:relative; width:400px; height:200px;
                 font-family:dotum,"",verdana;line-height:17px;font-size:12px;color:#555;}
        .tabmenu img {border:none;vertical-align:top;}
        .tabmenu ul {margin:0px;padding:0px;list-style:none;margin-top: 15px;}
        .tabmenu ul li {float:left}
        .tabmenu .tabcontent {display:none; width:240px;height:125px;position:absolute; left:0px;top:60px }
        .tabmenu .morebtn {position:absolute;right:0;top:30px;}
    </style>




    javascript (설명은 주석으로 대체함)

    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
    <script>
        $(document).ready(function(){
            $(".tabmenu").each(function(){
                var tab = $(this).children("ul");
                var tabBtn = tab.children("li").children("a");
                var content = tabBtn.nextAll();
                 
                // 탭버튼을 클릭했을때
                tabBtn.click(function(){
                    // 이미 on 상태면 pass
                    if( $(this).hasClass("on") ) return;
     
                    // 모든 컨텐츠 부분을 안보이게 한뒤
                    content.hide();
     
                    // 클릭한 tab 버튼(a태그) 옆의 모든 태그들은 보이도록
                    $(this).nextAll().show();
                     
                    // 모든탭 버튼에 있던 on 클래스를 빼고
                    // 현재 클릭한 탭메뉴 버튼에 on 클래스 추가
                    tabBtn.removeClass("on");
                    $(this).addClass("on");
                     
                    // 탭버튼를 쭉 돌면서 on 클래스가 있는 버튼만 on 이미지로 바꾸고
                    // 나머지 버튼들은 off 이미지로 바꾼다.
                    tabBtn.each(function(){
                        var src;
                        var img = $(this).children("img");
                        if( $(this).hasClass("on") ){
                            src = img.attr("src").replace("_off.", "_on.");
                        }else{
                            src = img.attr("src").replace("_on.", "_off.");
                        }
                         
                        img.attr("src", src);
                    });
                });
                 
                // 맨첫번째 탭버튼 클릭처리
                tabBtn.eq(0).click();
            });
        });
    </script>




    ※ 요렇게 tabmenu 클래스만 지정해서 똑같은 html 구조면 동시에 여러게 탭메뉴를 맹글수 있다.

    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
    <div class="tabmenu">
        <h2>첫번째 탭메뉴</h2> 
     
        <ul>
            <li><a href="#link"><img src="img/menu_01_off.gif" alt="메뉴01" /></a>
                <ul class="tabcontent">
                    <li><a href="#">1제목이 나오는부분.....</a></li>
                    <li><a href="#">2제목이 나오는부분.....</a></li>
                </ul>
                <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
            </li>
            <li><a href="#link"><img src="img/menu_02_off.gif" alt="메뉴02" /></a>
                <ul class="tabcontent">
                    <li><a href="#">무우우우우우우우.....</a></li>
                    <li><a href="#">5무우우우우우우우ㄴ.....</a></li>
                </ul>
                <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
            </li>
                <li><a href="#link"><img src="img/menu_03_off.gif" alt="메뉴03" /></a>
                <ul class="tabcontent">  
                    <li><a href="#">요농이 요느마</a></li>
                    <li><a href="#">요농이 요느마</a></li>
                </ul>      
                <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
            </li>
            <li><a href="#link"><img src="img/menu_04_off.gif" alt="메뉴04" /></a>
                <ul class="tabcontent">
                    <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                    <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                </ul>
                <p class="morebtn"><a href="#"><img src="img/more.gif" alt="MORE" /></a></p>
            </li>
        </ul>
    </div>
     
    <div class="tabmenu">
        <h2>두번째 탭메뉴</h2>  
        <ul>
            <li><a href="#link"><img src="img/menu_01_off.gif" alt="메뉴01" /></a>
                <ul class="tabcontent">
                    <li><a href="#">제목이 나오는부분.....</a></li>
                    <li><a href="#">제목이 나오는부분.....</a></li>
                </ul>
            </li>
            <li><a href="#link"><img src="img/menu_02_off.gif" alt="메뉴02" /></a>
                <ul class="tabcontent">
                    <li><a href="#">무우우우우우우우.....</a></li>
                    <li><a href="#">무우우우우우우우ㄴ.....</a></li>
                </ul>
            </li>
                <li><a href="#link"><img src="img/menu_03_off.gif" alt="메뉴03" /></a>
                <ul class="tabcontent">  
                    <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                    <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                </ul>
            </li>
            <li><a href="#link"><img src="img/menu_04_off.gif" alt="메뉴04" /></a>
                <ul class="tabcontent">
                    <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                    <li><a href="#">ㄷㄹㄴㄹㄴㄹㄴㄷㄹㄴㄹ</a></li>
                </ul>
            </li>
        </ul>
    </div>


    저작자표시 비영리 변경금지

    'Javascript 예제' 카테고리의 다른 글

    jQuery 로 탭 만들어 보기  (0) 2018.10.12
    Javascript 로 초성검색하기  (0) 2018.06.26
    네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기  (0) 2014.04.29
    jQuery 로 탭메뉴 보였다 안보였다 맹글기  (3) 2014.04.10
    jQuery로 Outer HTML 가져오기  (2) 2012.11.06
    Posted by 스토브

    네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기

    Javascript 예제 2014. 4. 29. 11:11


    네이버 지도에 커스텀 버튼을 넣을라고 공식 API 문서를 디벼보면서 추가해 볼려고 했더니 생각대로 잘 넣어지지 않았다 -.-


    구글님에게 이것저것 디벼보면서 커스텀 버튼을 뽓 넣었다. API 문서좀 잘 맹글어 주지하는 아쉬움은 있지만 뭐 어쩌나~~




    버튼을 쪽바로 넣기 위해서는 <div style="position: absolute;"></div> 로 버튼을 한번 뽓 감싸줘야 된다.


    솟스

    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
    <!doctype html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=KEY"></script>
        <link rel="stylesheet" type="text/css" href="http://static.naver.com/openapi_map/maps_openapi.css?13916988001">
         
        <style>
            a.btn {
                display:inline;padding:7px 12px;background-color:#5cb85c; color:#fff; border:solid 1px #1658a2;
                font-weight:bold;text-decoration:none
            }
            a.btn:hover { color:#cce4ff; border:solid 1px #002651; }
        </style>
    </head>
    <body>
        <div id="maptest"></div>
     
        <script>
            var map = new nhn.api.map.Map(
                document.getElementById('maptest'),
                {
                    point : new nhn.api.map.LatLng(35.710659, 127.883093),
                    zoom : 2,
                    mapMode : 0,
                    minMaxLevel : [ 1, 14 ],
                    size : new nhn.api.map.Size(600, 700)
                }
            );
             
            var btn = new nhn.api.map.CustomControl();
            var html = '';
            html += '<div style="position: absolute;">';
            html += '<a class="btn" target="_blank" href="http://stove99.tistory.com">커스텀 버튼!!</a>';
            html += '</div>';
             
            btn.createControl(html, {position:{right:20,top:55}});
            map.addControl(btn);
        </script>
    </body>
    </html>



    결과


    저작자표시 비영리 변경금지

    'Javascript 예제' 카테고리의 다른 글

    Javascript 로 초성검색하기  (0) 2018.06.26
    jQuery 로 탭메뉴를 맹글어 보아요~  (8) 2014.10.15
    jQuery 로 탭메뉴 보였다 안보였다 맹글기  (3) 2014.04.10
    jQuery로 Outer HTML 가져오기  (2) 2012.11.06
    jQuery 로 페이지를 벗어날때 확인창 띄우기  (1) 2012.06.08
    Posted by 스토브

    jQuery 로 탭메뉴 보였다 안보였다 맹글기

    Javascript 예제 2014. 4. 10. 17:11


    탭을 클릭할때 탭메뉴 이미지가 on, off 되고 해당되는 서브메뉴 div 가 보였다 안보였다 하는 샘플을 맹글어 보았다.


    주석을 싹 달아놨으니 응용하는데 큰 문제는 없을것이다.


    ※ 롤오버 이미지 이름은 프로그램 편의상 xxxxxx.png, xxxxxx_on.png 요렇게 해야 쪽바로 작동한다.


    ※ png 파일이 아니라 gif 나 뭐 다른 확장자면 소스중에 .toggle() 요부분에다 옵션으로 지정할 수는 있다. 고건 주석으로 설명되 있음.




    html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <div id="wrap">
        <div id="tabMenu">
            <ul>
                <li><a href="#" title="메뉴1"><img src="images/tab_01.png" alt="메뉴1" /></a></li>
                <li><a href="#" title="메뉴2"><img src="images/tab_02.png" alt="메뉴1" /></a></li>
                <li><a href="#" title="메뉴3"><img src="images/tab_03.png" alt="메뉴2" /></a></li>
                <li><a href="#" title="메뉴4"><img src="images/tab_04.png" alt="메뉴3" /></a></li>
                <li><a href="#" title="메뉴5"><img src="images/tab_05.png" alt="메뉴4" /></a></li>
                <li><a href="#" title="메뉴6"><img src="images/tab_06.png" alt="메뉴5" /></a></li>
                <li><a href="#" title="메뉴7"><img src="images/tab_07.png" alt="메뉴6" /></a></li>
            </ul>
        </div>
        <div id="tabSubMenu">
            <div>서브1<div>룰루랄라~</div></div>
            <div>서브2</div>
            <div>서브3</div>
            <div>서브4</div>
            <div>서브5</div>
            <div>서브6</div>
            <div>서브7</div>
        </div>
    </div>



    javascript

    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
    var tabMenu = $("#tabMenu ul>li>a");
    var tabSubMenu = $("#tabSubMenu>div");
     
    // 모든 서브메뉴 안보이게
    tabSubMenu.hide();
     
    // 탭메뉴 a 를 클릭했을때
    tabMenu.on("click", function(e){
        // 클릭한 메뉴가 몇번째 메뉴인지 가져옴
        var idx = tabMenu.index($(this));
     
        // 모든 서브메뉴 안보이게
        tabSubMenu.hide();
        // 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게
        tabSubMenu.eq(idx).show();
     
        // 현재 on 이미지를 off 이미지로 변경
        tabMenu.find("img.on").removeClass("on").toggle();
        // 클릭한 탭 이미지만 on 이미지로 변경
        $(this).find("img").addClass("on").toggle({to:"on"});
    });
     
     
     
    /**
        이미지 토클 훌러그인
        $("img").toggle();              // on이면 off로, off면 on 이미지로
        $("img").toggle({to:"on"});     // 무조건 on 이미지로
        // on, off 이미지 패턴설정
        $("img").toggle({to:"on", on:"_on.gif", ".gif"});
    */
    $.fn.toggle = function(opt){
        var base = {
            to : null,
            on : "_on.png",
            off : ".png"
        };
     
        $.extend(base, opt);
     
        this.each(function(){
            var el = $(this);
             
            if(!el.is("img")) return;
             
            var src = conv = el.attr("src");
             
            // to 옵션이 있을때
            if( base.to ){
                if( base.to=="on" && (src.indexOf(base.on)<0) ) conv = src.replace(base.off,base.on);
                else if( base.to=="off" ) conv = src.replace(base.on,base.off);
            }
            // to 옵션이 없으면 토글 처리
            else{
                conv = (src.indexOf(base.on) < 0) ? src.replace(base.off,base.on) : src.replace(base.on,base.off);
            }
             
            el.attr("src", conv);
            el.data("orgimg", conv);
        });
         
        return this;
    };
     
     
    // 페이지 로딩시 맨 첫번째 메뉴 튀어나와 있게 함.
    tabMenu.eq(0).click();


    전체소스

    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
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
     
    <body>
    <div id="wrap">
        <div id="tabMenu">
            <ul>
                <li><a href="#" title="메뉴1"><img src="images/tab_01.png" alt="메뉴1" /></a></li>
                <li><a href="#" title="메뉴2"><img src="images/tab_02.png" alt="메뉴1" /></a></li>
                <li><a href="#" title="메뉴3"><img src="images/tab_03.png" alt="메뉴2" /></a></li>
                <li><a href="#" title="메뉴4"><img src="images/tab_04.png" alt="메뉴3" /></a></li>
                <li><a href="#" title="메뉴5"><img src="images/tab_05.png" alt="메뉴4" /></a></li>
                <li><a href="#" title="메뉴6"><img src="images/tab_06.png" alt="메뉴5" /></a></li>
                <li><a href="#" title="메뉴7"><img src="images/tab_07.png" alt="메뉴6" /></a></li>
            </ul>
        </div>
        <div id="tabSubMenu">
            <div>서브1<div>룰루랄라~</div></div>
            <div>서브2</div>
            <div>서브3</div>
            <div>서브4</div>
            <div>서브5</div>
            <div>서브6</div>
            <div>서브7</div>
        </div>
    </div>
     
    <script>
        var tabMenu = $("#tabMenu ul>li>a");
        var tabSubMenu = $("#tabSubMenu>div");
         
        // 모든 서브메뉴 안보이게
        tabSubMenu.hide();
     
        // 탭메뉴 a 를 클릭했을때
        tabMenu.on("click", function(e){
            // 클릭한 메뉴가 몇번째 메뉴인지 가져옴
            var idx = tabMenu.index($(this));
     
            // 모든 서브메뉴 안보이게
            tabSubMenu.hide();
            // 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게
            tabSubMenu.eq(idx).show();
     
            // 현재 on 이미지를 off 이미지로 변경
            tabMenu.find("img.on").removeClass("on").toggle();
            // 클릭한 탭 이미지만 on 이미지로 변경
            $(this).find("img").addClass("on").toggle({to:"on"});
        });
     
     
     
        /**
            이미지 토클 훌러그인
            $("img").toggle();              // on이면 off로, off면 on 이미지로
            $("img").toggle({to:"on"});     // 무조건 on 이미지로
            // on, off 이미지 패턴설정
            $("img").toggle({to:"on", on:"_on.gif", ".gif"});
        */
        $.fn.toggle = function(opt){
            var base = {
                to : null,
                on : "_on.png",
                off : ".png"
            };
     
            $.extend(base, opt);
     
            this.each(function(){
                var el = $(this);
                 
                if(!el.is("img")) return;
                 
                var src = conv = el.attr("src");
                 
                // to 옵션이 있을때
                if( base.to ){
                    if( base.to=="on" && (src.indexOf(base.on)<0) ) conv = src.replace(base.off,base.on);
                    else if( base.to=="off" ) conv = src.replace(base.on,base.off);
                }
                // to 옵션이 없으면 토글 처리
                else{
                    conv = (src.indexOf(base.on) < 0) ? src.replace(base.off,base.on) : src.replace(base.on,base.off);
                }
                 
                el.attr("src", conv);
                el.data("orgimg", conv);
            });
             
            return this;
        };
     
     
        // 페이지 로딩시 맨 첫번째 메뉴 튀어나와 있게 함.
        tabMenu.eq(0).click();
    </script>
     
    </body>
    </html>


    ※ 마우스 오버될때도 적용할려면~~?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 탭메뉴 a 를 클릭했을때
    tabMenu.on("click", function(e){
        // 클릭한 메뉴가 몇번째 메뉴인지 가져옴
        var idx = tabMenu.index($(this));
     
        // 모든 서브메뉴 안보이게
        tabSubMenu.hide();
        // 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게
        tabSubMenu.eq(idx).show();
     
        // 현재 on 이미지를 off 이미지로 변경
        tabMenu.find("img.on").removeClass("on").toggle();
        // 클릭한 탭 이미지만 on 이미지로 변경
        $(this).find("img").addClass("on").toggle({to:"on"});
    }).on("mouseover", function(){
        // 마우스 오버됬을때 클릭한것처럼 동작
        $(this).click();
    });



    메뉴 심플하기 그지 없다.

    저작자표시 비영리 변경금지

    'Javascript 예제' 카테고리의 다른 글

    jQuery 로 탭메뉴를 맹글어 보아요~  (8) 2014.10.15
    네이버맵 커스텀 컨트롤(CustomControl) 버튼 지도에 추가하기  (0) 2014.04.29
    jQuery로 Outer HTML 가져오기  (2) 2012.11.06
    jQuery 로 페이지를 벗어날때 확인창 띄우기  (1) 2012.06.08
    jQuery 로 원하는 갯수만큼 checkbox 선택하기  (1) 2011.11.24
    Posted by 스토브
    prev 1 2 3 next
    openclose

    Article Category

    분류 전체보기 (223)
    이클립 (28)
    maven (9)
    Spring (7)
    Java (26)
    mybatis (8)
    jQuery Plugi.. (8)
    Javascript (14)
    Javascript 예.. (12)
    CSS (2)
    잡다구리 샘플 (4)
    쓸만한지식 (81)
    Ubuntu serve.. (22)
    쇼핑물건 평가 (1)

    Recent Article

    티스토리툴바