19.12.11 개발기록 -[Javascript] 화면 전환 버튼 구현하기
오늘은 저번에 포스팅했던 화면전환에서, 버튼을 클릭하면 다음페이지 및 이전 페이지로 넘어가도록 구현해보도록 하겠다.
전체 화면을 보면 디-게 간지지만, 혹여나 문제가 될까 버튼부분만 캡쳐하여 올리도록 한다.
위 사진 오른쪽 하단의 왼쪽, 오른쪽 버튼을 누르면 해당 페이지로 넘어가도록 구현해본다.
이렇게 말이다.
위와 같이 구현하기 위해서는 아주아주 간단한 알고리즘을 생각해내면 된다.
1. 각 페이지 마다 index를 부여한다. -> 첫 번째 페이지의 index = 0, 두 번째 페이지 index = 1, 세 번째 페이지는 index = 2, 이런식으로 말이다.
|
1
2
3
4
|
<div class="box_item_swipe"><a class="box_item_number">03</a><span class="box_item_number2">/ 03</span>
<img id="go-left" src="images/arrow-down.png" class="box_item_arrow2" onclick="slidePage2('left')">
<img id="go-right" src="images/arrow-down.png" class="box_item_arrow3" onclick="slidePage2('right')">
</div>
|
2. 그리고 우선 html 파일에 있는 각 오른쪽 왼쪽의 버튼 이미지에 onclick 이벤트를 부여한다. 저기 보이는 slidePage2는 js 파일에 미리 구현해둔 함수이다.
2-1. slidePage( )에 각 버튼 클릭 시 서로 다른 parameter를 보내 줄 수 있도록 설정해준다. 나는 왼쪽을 누르면 'left', 오른쪽을 누르면 'right'를 주었다.
3. 이제 javascript 내 slidePage() 를 살펴보자.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
function slidePage2(direction) {
if (index == 0) {
if(direction == 'left') {
index = 2;
$("#content-two").hide(0);
$("#content-one").hide(0);
$("#content-three").fadeIn(0);
} else if (direction == 'right') {
index = 1;
$("#content-one").hide(0);
$("#content-three").hide(0);
$("#content-two").fadeIn(0);
}
|
4. 위에서 'left' 및 'right' 로 보내준 parameter를 direction 으로 받아준다. 그리고 1번 페이지 ( if (index == 0)) 에서 direction 이 left 이면, 세 번째에 해당하는 index = 2 를 지정해주고,
(( 미리 구현해둔 1~3번 페이지에 각각 아이디를 부여해두어야 한다 ! -> 페이지 전체 div 에 부여하면 된다 ! ))
5. 3번째 페이지를 id를 이용하여 $('#content-three') 를 fadeIn 시키고, 나머지 2개의 페이지는 hide를 이용하여 숨겨주도록 한다.
6. 만약 direction 이 right 라면, 두 번째에 해당하는 index = 1을 지정해주고,
7. 2번째 페이지를 id를 이용하여 $('#content-two')를 마찬가지로 불러오고, 나머지 2개의 페이지는 숨겨주도록 한다.
8. 이것을 이해한다면, 나머지 페이지도 똑같이 적용하면 되기에, 위 내용들을 이해하도록 한다.
이 포스팅을 보시는 분 중 제가 틀린 부분, 잘못 이해한 부분이 있어 알려주실만한 내용이 있다면 언제든 편하게 댓글 남겨주세요 :)
감사합니다 !