Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

codingfarm

탭 기능 만들기 본문

web/JavaScript

탭 기능 만들기

scarecrow1992 2020. 10. 17. 17:40

1. 기능

  • 3개의 다른 이미지를 하나로 압춥축후 분리된것처럼 사용한다.
  • 탭을 누르면 현재 선택한 인덱스 값이 무엇인지 알 수 있어야 한다.
  • 미선택, 선택, 마우스 올림 3개의 상태에 따라 이미지를 따로 적용한다.

 

2. 이미지

newbtn.bar.1.png
0.04MB
newbtn.bar.2.png
0.01MB
newbtn.bar.3.png
0.04MB
newbtn.bar.4.png
0.04MB
newbtn.bar.5.png
0.04MB
newbtn.bar.6.png
0.04MB

 

3. 코드

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
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
 
    <style>
        .tab-menu {
            list-style: none;
            height:80px;
        }
 
        .tab-menu li {
            width:99px;
            height:40px;
            background-position-y:0;
            text-indent: -1000px;
            overflow: hidden;
            display: inline-block;
            float:left;
        }
        .tab-menu li:hover {
            background-position-y: -40px;
        }
        .tab-menu li.select {
            background-position-y: -80px;
            height:80px;
        }
        .tab-menu li.menuitem1 {
            background-image: url(./images/newbtn.bar.1.png);
        }
        .tab-menu li.menuitem2 {
            background-image: url(./images/newbtn.bar.2.png);
        }
        .tab-menu li.menuitem3 {
            background-image: url(./images/newbtn.bar.3.png);
        }
        .tab-menu li.menuitem4 {
            background-image: url(./images/newbtn.bar.4.png);
        }
        .tab-menu li.menuitem5 {
            background-image: url(./images/newbtn.bar.5.png);
        }
        .tab-menu li.menuitem6 {
            background-image: url(./images/newbtn.bar.6.png);
        }
    </style>
 
    <script src="../../../libs/jquery-1.11.0.min.js"></script>
    <script>
        /*
         미션 03 탭메뉴 선택처리를 콜백 함수로 받기
         미션 02에서 작성한 탭메뉴 소스 코드를 수정해 선택한
         탭메뉴 인덱스 정보를 #info 영역에 출력해 주세요.
         단, 가능하면 탭메뉴 로직 구현 부분과 추가 기능인 로직 처리 부분을 분리해서 작업할 수 있게 만들어주세요.
         */
        $(document).ready(function(){
            // 탭메뉴 코드가 동작할 수 있도록 tabMenu() 함수 호출
            tabMenu("#tabMenu1", onSelectItem);
        });
 
        function tabMenu(selector, callback){
            var $tabMenu = null;
            var $menuItems = null;
            // 선택한 탭메뉴를 저장할 변수
            var $selectMenuItem =null;
 
            // 요소 초기화, tabMenu() 함수 내부에서 사용할 공통 데이터는 모두 이곳에 작성해주세요.
            function init(selector){
                $tabMenu = $(selector);
                $menuItems =$tabMenu.find("li");
            }
 
            // 이벤트 등록은 모두 이곳에 작성해주세요.
            function initEvent(){
                $menuItems.click(function(){
                    setSelectItem($(this));
                });
            }
 
            // 선택 메뉴 아이템 만들기
            function setSelectItem($item){
                if($selectMenuItem){
                    $selectMenuItem.removeClass("select");
                }
                $selectMenuItem = $item;
                $selectMenuItem.addClass("select");
 
 
                //선택 콜백 함수 실행
                if(callback!= null)
                callback($selectMenuItem.index());
            }
 
            init(selector);
            initEvent();
        }
 
        // 선택 처리
        function onSelectItem(index){
            $("#info").html(index);
        }
    </script>
 
 
</head>
 
<body>
 
    <ul class="tab-menu" id="tabMenu1">
        <li class="menuitem1">google</li>
        <li class="menuitem2">facebook</li>
        <li class="menuitem3">pinterest</li>
        <li class="menuitem4">twitter</li>
        <li class="menuitem5">airbnb</li>
        <li class="menuitem6">path</li>
    </ul>
    <div>선택한 인덱스 값 : <span id="info"></span></div>
 
</body>
</html>
 
 cs

 

3-1. 이미지 표시

  • 마우스 상호작용에 따라 3개의 상태로 정의된다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.tab-menu li {
    width:99px;
    height:40px;
    background-position-y:0;
    text-indent: -1000px;
    overflow: hidden;
    display: inline-block;
    float:left;
}
.tab-menu li:hover {
    background-position-y: -40px;
}
.tab-menu li.select {
    background-position-y: -80px;
    height:80px;
}
 cs
  • 평상시에 레이아웃의 height를 40px로 하되, select상태일때만 80px로 설정한다.
  • 각 상태에  따라 background-position-y의 값을 조절하여 이미지의 위치를 조절한다.
  • text-indent는 들여쓰기(양수)와 내여쓰기(음수)를 구현하는 기능으로 내여쓰기를 할때 왼쪽에 적절한 여백을 준다.
  • -1000px을 함으로써 menuitem클래스의 내용을 모두 화면에서 안보이게 해버린다.
    • 그런데 그냥 menuitem내의 내용을 비워버리면 이 값은 넣을 필요가 없다.
    • 디버깅을 쉽게할려고 내용을 작성한건지 모르겠다.

 

3-2. 선택한 인덱스 값 표시

  • 마지막으로 클릭한 tab이 무엇인지 웹브라우저 화면상에 표시되어야 한다.
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
<script>
    /*
        미션 03 탭메뉴 선택처리를 콜백 함수로 받기
        미션 02에서 작성한 탭메뉴 소스 코드를 수정해 선택한
        탭메뉴 인덱스 정보를 #info 영역에 출력해 주세요.
        단, 가능하면 탭메뉴 로직 구현 부분과 추가 기능인 로직 처리 부분을 분리해서 작업할 수 있게 만들어주세요.
        */
    $(document).ready(function(){
        // 탭메뉴 코드가 동작할 수 있도록 tabMenu() 함수 호출
        tabMenu("#tabMenu1", onSelectItem);
    });
 
    function tabMenu(selector, callback){
        var $tabMenu = null;
        var $menuItems = null;
        // 선택한 탭메뉴를 저장할 변수
        var $selectMenuItem =null;
 
        // 요소 초기화, tabMenu() 함수 내부에서 사용할 공통 데이터는 모두 이곳에 작성해주세요.
        function init(selector){
            $tabMenu = $(selector);
            $menuItems =$tabMenu.find("li");
        }
 
        // 이벤트 등록은 모두 이곳에 작성해주세요.
        function initEvent(){
            $menuItems.click(function(){
                setSelectItem($(this));
            });
        }
 
        // 선택 메뉴 아이템 만들기
        function setSelectItem($item){
            if($selectMenuItem){
                $selectMenuItem.removeClass("select");
            }
            $selectMenuItem = $item;
            $selectMenuItem.addClass("select");
 
 
            //선택 콜백 함수 실행
            if(callback!= null)
            callback($selectMenuItem.index());
        }
 
        init(selector);
        initEvent();
    }
 
    // 선택 처리
    function onSelectItem(index){
        $("#info").html(index);
    }
</script>
 cs

ready

  • tabMenu함가 매개변수로 실제 탭 정보를 담은 선택자와 출력을 위한 콜백함수를 직접받음으로 탭과 출력란이 더 늘어나더라도 효율적으로 확장 가능하다.
  • menuItem들이 모여있는 tabMenu1와 item을 클릭할때마다 호출시킬 onSelectItem을 전달한다.

 

tabMenu

  • menuItem들의 상위 태그인 tabMenu 선택자와 onSelectItem함수를 전달받음.
  • tabMenu : 현재 선택된 탭메뉴 선택자, tabMenu에서 수정됨
  • menuItems : tabMenu에 속한 메뉴아이템들의 선택자, tabMenu에서 수정됨
  • selectMenuItem : 현재 선택된 메뉴아이템 선택자, setSelectItem 함수에 의해 수정된다.

 

item

  • 현재 제어하는 tebMenu에 맞추어 tabMenu와 menuItems를 초기화한다.

 

initEvent

  • 이벤트등록이 이루어 진다.
  • 각 menuItems를 클릭할때마다 setSelectItem이벤트가 호출된다.

 

setSelectItem

  • selectMenuItem 선택자를 참조하여 이미 선택된 태그에서 selected 클래스를 지운다.
  • 새로 선택된 태그에 selected클래스를 추가한다.
  • onSelectItem을 호출한다.

 

onSelectItem

  • 메뉴아이템 클릭시 발생하는 실질적인 효과를 담당하는 이벤트
  • 본문내에 info id를 가진 태그를 찾아서 해당 메뉴아이템의 인덱스를 출력한다.

 

 

 

저작자표시

'web > JavaScript' 카테고리의 다른 글

클로저 함수(Closure Function)  (0) 2020.10.17
콜백 함수(Call Back)  (0) 2020.10.11
중첩 함수(Nested Function)  (2) 2020.10.11
함수 종류  (0) 2020.10.11
함수 정의 방법 4가지  (0) 2020.10.11
'web/JavaScript' Related Articles more
Comments