메가박스 사이트 만들기 학습일지#7 - 영화차트탭메뉴

ㅁ이번 강의에서는 탭메뉴에서 자주쓰이는 자바스크립트,제이쿼리를 사용한다!

자바스크립트를 사용하기에 앞서 jquery.min_1.12.4.js 를 연동을 필수로 해줘야한다!

 

완성 모습

 

이번 강의에서 완성모습과 기억하면 좋을 기능은 "박스오피스,최신개봉작 등 탭메뉴를 클릭하는경우 해당 영화차트탭에 맞는 영화들이 보여질 수 있도록 기능을 구현한다."

 

탭메뉴는 간단하게 구현이 가능하다. 우선 버튼,컨텐츠 영역을 변수를 선언해서 담는다!

var movBtn = $(".movie_tit > ul > li");

var movCont = $(".movie_chart > div");

* 버튼영역 (movBtn) : 영화차트탭메뉴 

* 컨텐츠영역 (movCont) : 영화차트내용 

 

지금은 별도 제이쿼리를 작성하지않았기때문에 모든 영화차트내용이 보여지고 있다. 

일단은 첫번째 차트탭메뉴에 해당하는 영화차트 내용만 보여지도록 제이쿼리 작성해야한다. 

 

movCont.hide()                     .eq(0)                       .show();

컨텐츠영역을 숨기다.    첫번째영역을 찾는다.           보여준다.

→ 첫번째 영역에 해당하는 컨텐츠 영역만 보여지게된다.

 

* movBtn을 .click() 했을때 함수를 실행하는 자바스크립트를 작성해보자!

movBtn.click(function(e){ 

        e.preventDefault();

        var target = $(this);

        var index = target.index();

        movBtn.removeClass("active");

        target.addClass("active");

        movCont.css("display","none");

        movCont.eq(index).css("display","block");

});

 

* 설명

1) preventDefault() :

    a 태그를 눌렀을때 href로 이동하지 않게 막아줄때

    form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우

2) var target = $(this) :

    버튼을 클릭했을때, 버튼이 현재는 4개이지만 100개일수도있다. 이럴때 내가 어떤 버튼을 클릭했는지 알아야하는데

    이때, this를 사용하며 "자기자신을 의미" 즉 내가클릭한 버튼을 의미

 

3) var index = target.index(); :

    this를 이용해서 내가 몇번째 버튼을 클릭했는지 알수있지만 사실 눈으로 확인은 어렵다. 

    이럴때 index 함수를 같이 사용해서 클릭한 버튼에 번호를 매겨준다!

    ※ alert(index) 를 작성해서 버튼을 클릭했을때 정상적으로 코드가 작성하는지 확인해보는 습관도 중요

 

4)   movBtn.removeClass("active");

     target.addClass("active");

     모든 monBtn에 "active"를 remonveClass 로 제거해주고, target으로 내가 클릭버튼에 대해서는 addClass로       

     "active"를 활성화 시켜준다.

 

5) movCont.css("display","none");

   movCont.eq(index).css("display","block");

   movCont 내용도 "display","none" 숨겨준다. 또한, "eq(index) → 내가 클릭한 버튼" 을 찾아서 보여준다.

 

 

거창한게 아니더라도 간단한 자바스크립트를 활용해서 이런 차트 탭 메뉴를 이동하고 내용들을 다르게 보여주는 기능들을 구현할 수 있다.