2016. 4. 26. 13:55ㆍlanguage/jquery mobile
화면을 좌, 우로 밀어서 페이지를 이동하는 방법에 대해 설명합니다.
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", function( event ) {
var next = $( this ).jqmData( "next" );
if ( next ) {
navnext( next );
}
});
$( document ).on( "swiperight", ".ui-page", function( event ) {
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# 와 방법이 같으니 설명은 생략합니다.
파일을 실행하고 직접 화면을 밀어보며 테스트 해 봅니다.
마우스 드래그로도 테스트가 가능합니다.