화면을 좌, 우로 밀어서 페이지를 이동하는 방법에 대해 설명합니다.

 

 

 

 

swipeleft, swiperight 이벤트를 사용합니다.

 

swipeleft는 사용자가 왼쪽으로 30픽셀 이상 쓸어 넘겼을 경우 발생합니다.

 

swiperight는 사용자가 오른쪽을 30픽셀 이상 쓸어 넘겼을 경우 발생합니다.

 

 



 

만들 파일은 총 4개입니다.

 

먼저 페이지 이동에 사용될 html 파일 3개를 만듭니다.

처음에는 파일명을 똑같이 만드세요.

소스가 눈에 익고 이해될 때 본인의 입맛에 맞게 파일명도 바꿔보는걸 추천합니다.

 

014event.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery mobile</title>
 
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
 
<script src="customSwipePage.js"></script>
 
</head>
<body>
 
<section data-role="page" id="014event" class="eventPage" data-next="014event2" data-prev="014event3" data-dom-cache="true">
    <header data-role="header">
        <h1>jQuery Mobile</h1>
    </header> 
    <div class="content" data-role="content">
        
        내용입니다.<br>
        014event<br/>
        014event<br/>
        014event<br/>
        014event<br/>
        014event<br/>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>
</body>
</html>
cs

 

여기서 한번만 설명합니다.

아래 Html 파일들은 위 Html 파일과 내용이 같기 때문에 생략합니다.

 

8# ~ 10# : 각각 jquery , jquery mobile, juqery mobile css 파일을 import 합니다.

12# : swipePage 를 할 javascript 를 가지고 있는 js파일을 import 합니다. (아래에서 만듭니다.)

17# : page 를 만듭니다. data-next 는 커스텀 jqmData 속성입니다. 다음으로 이동할 페이지 파일명을 적어줍니다. data-prev 도 마찬가지이며 이전으로 이동할 페이지 파일명을 적어줍니다. data-dom-cache="true" 는 페이지 유지를 위해 케시를 삭제하지 않습니다.

 

 

아래 html 파일들도 위 내용과 거의 동일하나 17#에 다른부분이 있으니 주의깊게 보시기 바랍니다.

 



 

014event2.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery mobile</title>
 
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
 
<script src="customSwipePage.js"></script>
 
</head>
<body>
 
<section data-role="page" id="014event2" class="eventPage" data-next="014event3" data-prev="014event" data-dom-cache="true">
    <header data-role="header">
        <h1>jQuery Mobile</h1>
    </header> 
    <div class="content" data-role="content">
        
        내용입니다.<br>
        014event2<br/>
        014event2<br/>
        014event2<br/>
        014event2<br/>
        014event2<br/>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>
</body>
</html>
cs

 

 

014event3.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery mobile</title>
 
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
 
<script src="customSwipePage.js"></script>
 
</head>
<body>
 
<section data-role="page" id="014event3" class="eventPage" data-next="014event" data-prev="014event2" data-dom-cache="true">
    <header data-role="header">
        <h1>jQuery Mobile</h1>
    </header>
    <div class="content" data-role="content">
        
        내용입니다.<br>
        014event3<br/>
        014event3<br/>
        014event3<br/>
        014event3<br/>
        014event3<br/>
    </div>
    <footer data-role="footer"><h1>cofs</h1></footer>
</section>
</body>
</html>
cs

 

 

 

customSwipePage.js

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
    $( document ).one( "pagecreate"".eventPage"function() {
        // Handler for navigating to the next page
        function navnext( next ) {
            $( ":mobile-pagecontainer" ).pagecontainer( "change", next + ".html", {
                transition: "slide"
            });
        }
 
        // Handler for navigating to the previous page
        function navprev( prev ) {
            $( ":mobile-pagecontainer" ).pagecontainer( "change", prev + ".html", {
                transition: "slide",
                reverse: true
            });
        }
        
        $( document ).on( "swipeleft"".ui-page"functionevent ) {
            var next = $( this ).jqmData( "next" );
            if ( next ) {
                navnext( next );
            }
        });
        
        $( document ).on( "swiperight"".ui-page"functionevent ) {
            var prev = $( this ).jqmData( "prev" );
            if ( prev ) {
                navprev( prev );
            }
        });
        
    });
cs

1# : pagecreate 이벤트를 걸어줍니다.

3# : 다음 페이지로 이동하는 함수입니다.

4# : http://cofs.tistory.com/155 에서 설명한 페이지 이동과는 다른 방법으로 이동합니다. 사용하는 방법만 다를 뿐 같으니 참고하시기 바랍니다.

10# : 이전 페이지로 이동하는 함수입니다.

17# : jquery on 을 사용하여 swipeleft 이벤트를 걸어줍니다.

18# : jqmData 선택자를 이용하여 next 속성을 가져옵니다. ( 위 html 파일에서 data-next 로 선언되어 있습니다.)

20# : 다음페이지로 이동하는 함수를 실행합니다.

24# ~ 29# : 17# ~ 22# 와 방법이 같으니 설명은 생략합니다.

 

 

파일을 실행하고 직접 화면을 밀어보며 테스트 해 봅니다.

 

마우스 드래그로도 테스트가 가능합니다.

 

 

by 개발자 CofS 2016.04.26 13:55
  • Favicon of http://koeiking11.tistory.com/ BlogIcon 비가오면 2016.05.20 14:16 신고 ADDR EDIT/DEL REPLY

    글을 잘 정리해 주셨네요^^
    잘보고 가요~~

  • 2017.04.11 22:34 ADDR EDIT/DEL REPLY

    비밀댓글입니다

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2017.04.12 09:20 신고 EDIT/DEL

      jquery-mobile
      <script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
      이걸 쓰면 css가 많이 겹쳐서 이상하게 나오는데 수정할 수 있는 방법 있을까요?
      css를 안넣으면 작동ㅇㅣ 안되구 ㅠㅠ

      ==================================================

      css가 겹치거나 할 경우에는 jquery 와 관련있는 css 파일을 삭제해보시고 순서를 변경하거나 버전을 맞추거나 등 여러 방법으로 시도해봐야할 것같아요 ㅎㅎ
      css가 겹치거나 깨져보이는건 다른 css와 충돌이 있는 경우라고 생각이 드네요 ㅎㅎ
      또는 css 파일의 내용이 깨져있거나 경로가 맞지 않을 수 있으니 확인해보시는게 좋겠네요 ㅎㅎ