기본 콘텐츠로 건너뛰기

jQuery menu 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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
    <style>
        #tab-menu {
            list-style: none;
        }
        #tab-menu li {
            width:96px;
            height:44px;
            background-position-y:0;
            text-indent: -1000px;
            overflow: hidden;
            display: inline-block;
            float:left;
        }
        #tab-menu li:hover {
            background-position-y: -44px;
        }
        #tab-menu li.select {
            background-position-y: -88px;
            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="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        
        $(document).ready(function(){
                alert("test");
                
                var before;
                $("li").click(function(){
                    $(before).removeClass('select'); 
                    before=$(this).addClass('select');            
                });        
        });
                                                     
   </script>
</head>
    
    <body>
        <ul id="tab-menu">
            <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>        
    </body>
</html>
cs

css에서 불러오는 이미지
 


마우스 버튼이 닿지 않을떄는 가장 위의 모양이 된다







마우스가 닿으면 가운데 그림처럼 불이 들어오고







마우스가 클릭되어지면 아래처럼 갈색으로 변하면서 커진다.







우선 닿지 않을떄랑 닿을때는 css에서 처리를 해주었다.



닿을 경우는 hover가 되기때문에 li:hover를 해주었다.







그리고 클릭했을때 css를 li.select로 해주었다.







즉 select를 클릭되어진 태그로 옮겨주기만 하면된다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
        
        $(document).ready(function(){
                alert("test");
                
                var before;
                $("li").click(function(){
                    $(before).removeClass('select'); 
                    before=$(this).addClass('select');            
                });        
        });
                                                     
</script>
cs


cs





먼저 8번째 줄이 없다고 하자 8번째 줄이 없으면 클릭된 각각의 버튼이 다 마지막 그림을 띌것이다.







클릭이 됬을때는 addClass를 이용하여 select라는 클래스명을 추가한다.



추가가 되었기 때문에 css에서 li.select의 효과를 받게된다.










8번째 줄이 없다고 가정을 하고 addClass만 해준다면



계속클릭을 했다면 이런 모양이 될것이다.







그럼 이제 이전에 있던 버튼의 select를 지우자



removeClass를 이용하면 된다.







그럼 이제 버튼 class에 select가 붙을때 이것을 변수에 저장을 하고



 태그가 클릭이 됬을때 이전에 select가 달려있던 버튼의 select를 지우고



새로 달면서 그것을 다시 변수에 집어 넣어준다.

라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

[node.js] 파일 리더기 만들기 - 사용 모듈 정리, pdf 구조, hwp 구조

pdf -> html 변환 가장 무난하다. 기본적으로 pdf는 htm와 비슷한 형태의 구조를 가지고 있다. 크게 header , body , xref table , trailer 의 구조로 되어있다. pdf는 환경에 상관없이 표현을 하기 위한 목적을 가지고 있는 파일이다. 이런 이유 때문에 무난히 진행이 된 것 같다. pdf2htmlex와 pdftohtmljs라는 모듈을 이용을 했다. var pdftohtml = require ( 'pdftohtmljs' ) ; var converter = new pdftohtml ( 'test.pdf' , "sample.html" ) ; converter . convert ( 'ipad' ) . then ( function ( ) { console . log ( "Success" ) ; } ) . catch ( function ( err ) { console . error ( "Conversion error: " + err ) ; } ) ; 이미지나, text같은 것들이 거의 100%로 변환이 된다. docx -> html 변환 docx파일을 html파일로 변환을 할 때는 style 적용과 한글이 깨지는 문제가 있다. 텍스트들을 전부 잘 읽기는 하는데 스타일 정보를 제대로 가져오지 못하기 때문에 좀 애매하다 - Headings. - Lists. - Customisable mapping from your own docx styles to HTML. For instance, you could convert WarningHeading to h1.warning by providing an appropriate style ...
댓글 쓰기
자세한 내용 보기

[알고리즘] snake게임 알고리즘

막무가네로 알고리즘을 공부하면 재미가 없으니 게임을 접목하여 다루어 보도록 하겠습니다. 게임의 대상은 스네이크 게임입니다. 많은 사람들은 어릴 때 뱀게임을 많이 해봤을 것 입니다. 이번에 다뤄볼 주제는 뱀이 움직임을 어떻게 구현을 할지 알아보겠습니다. 뱀은 크게 3가지의 경우가 있습니다 1. 가장 중요한 뱀을 움직이기 2. 음식먹기 이때 뱀은 크기가 늘어나야 합니다. 3. 뱀이 움직이는 정책   - 뱀이 움직이지 못하는 경우는 : 우측방향에서 좌측 방향으로 OR 위에 아래 방향고 같이 180도 반전되는 움직임은 막겠습니다. 순수한 알고리즘을 만드는 과정이기 때문에 음식을 먹었는지 안먹었는지 판단하는 부분은 랜덤으로 판단을 하도록 하겠습니다. def is_eat(): return random.choice([1, 0]) 랜덤으로 1, 0을 반환을 해줍니다. 실제로 게임을 만든다면 해당 함수는 뱀의 머리가 음식의 좌표와 같은지 검사를 해주면 되겠습니다. key_position_map = { 'w': [-1, 0], # up 's': [1, 0], # down 'a': [0, -1], # left 'd': [0, 1] # right } direction = key_position_map.get('d') 다음으로는 키맵핑을 한 오브젝트 입니다. direction은 현재 뱀의 방향을 나타냅니다. snake_body = [[2, 3], [1, 3],[1, 2], [1, 1]] 주인공이 되는 뱀의 좌표들 입니다. while True: key = input() new_direction = key_position_map.get(key) if new_direction and direction_check(direction, new_direction): directi...
댓글 쓰기
자세한 내용 보기

[javascript] 자스민(Jasmine)을 이용하여 TDD 작성후 웹 페이지에 적용해보자.

 다음 코드는  멍개의 코드 저장소 에 있습니다. 코드를 확인하고 싶으면 여기를 click 하세요 시작하기 전에... 책을 시작하기 전에 책에서 사용하는 자스민을 어떤식으로 이용하여 테스트 코드를 작성할 수 있는지 봐보자. 자스민 사용방법 테스트 러너파일 작성 테스트 러너란 자스민 코드와 소스파일, 스펙을 참조하는 html 파일 app_spec.html 테스트 코드를 작성하기 전에 첫째로 js 파일을 UI에서 완전히 분리하여 작성하는 것이 중요하다. 모듈패턴 테스트 코드가 가능한 코드를 작성하기 위해서는  모듈패턴 을 사용하도록 합니다. 모듈패턴이란? 함수로 데이터를 감추고, 모듈 API를 담고있는 객체를 반환하는 형태다. 모듈패턴은 자바스크립트에서 가장 많이 사용하는 패턴입니다. 두 가지 형태로 모듈패턴을 사용할 수 있습니다. 첫 번째는 호출하는 방식으로 사용합니다. 두 번째는 즉시 실행 함수 기반으로 사용할 수 있습니다. 여기서 즉시 실행 함수를  IIFE(Immediately Invoked Function Expression) 라고 합니다. 모듈 패턴 코드를 어떤식으로 작성할 수 있는지 간단하게 확인해보겠습니다. // 공간생성 let App = App || {}; // 생성된 공간에 함수를 추가한다. 인자로 함수를 넘긴다.( == 의존성 있는 함수를 주입) App.Person = function(God){ let name = God.makeName(); // API 노출 return { getName: function(){return name;}, setName: function(newName){name = newName;} } }; App 변수를 생성합니다. 생선된 변수에 Person() 함수를 만듭니다. person() 함수는 첫 번째 인자로 함수를 전달받습니다. retur...
댓글 1개
자세한 내용 보기