2016. 3. 11. 09:47ㆍlanguage/jquery mobile
jquery mobile은 비동기 방식이므로 페이지를 로딩하는 이벤트와 로딩하기 전 후 이벤트를 구별합니다. jquery에서는 보통 ready 메소드를 사용하여 jquery(douvument).read(); 또는 약식으로 $(function(){}); 으로 사용하기도 합니다.
pagebeforehide
a 페이지에서 b 페이지로 이동하기 전에 a 페이지에서 발생하는 이벤트 입니다. ui.nextPage는 이동할 페이지 b 이며 b가 없을 경우에는 빈 jquery 객체입니다.
pagebeforeshow
a 페이지에서 b 페이지로 이동하기 전에 b 페이지에서 발생하는 이벤트 입니다. ui.prevPage는 이동 시작 페이지 a 이며 a가 없을 경우에는 빈 jquery 객체입니다.
pagehide
전환 시작 페이지 a 에서 전환이 끝난 후 발생합니다. ui.nextPage는 전환대상 페이지의 jquery 객체이며 전환 대상 페지이가 없을 경우는 빈 객체입니다.
pageshow
전환 대상 페이지 b 에서 전환이 끝난 후 발생합니다. ui.prevPage는 전환 시작 페이지의 jquery 객체이며 전환 시작 페이지가 없을 경우는 빈 객체입니다.
이벤트를 사용하려면 적당한 이벤트 리스너를 사용해야 합니다.
jquery.bind(), jquery.delegate(), jquery.on() 을 써서 사용할 수 있습니다.
보통은 bind를 사용해도 무방하지만 비동기로 불러온 페이지에는 delegate나 on을 사용해야 합니다.
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<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 type="text/javascript">
$(function(){
$("#page1").bind("pagebeforehide",function(event, ui){
alert("1페이지에서 2페이지로 전환 전에 1페이지에서 작동합니다.");
});
$("#page2").bind("pagebeforeshow",function(event, ui){
alert("1페이지에서 2페이지로 전환 전에 2페이지에서 작동합니다.");
});
$("#page1").bind("pagehide",function(event, ui){
alert("1페이지에서 2페이지로 전환이 끝난 후에 1페이지에서 작동합니다.");
});
$("#page2").bind("pageshow",function(event, ui){
alert("1페이지에서 2페이지로 전환이 끝난 후에 2페이지에서 작동합니다.");
});
///////////////////////////////////////////////////////////////////////////
$("#page2").bind("pagebeforehide",function(event, ui){
alert("2페이지에서 1페이지로 전환 전에 2페이지에서 작동합니다.");
});
$("#page1").bind("pagebeforeshow",function(event, ui){
alert("2페이지에서 1페이지로 전환 전에 1페이지에서 작동합니다.");
});
$("#page2").bind("pagehide",function(event, ui){
alert("2페이지에서 1페이지로 전환이 끝난 후에 2페이지에서 작동합니다.");
});
$("#page1").bind("pageshow",function(event, ui){
alert("2페이지에서 1페이지로 전환이 끝난 후에 1페이지에서 작동합니다.");
});
///////////////////////////////////////////////////////////////////////////
});
</script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>1 page</p>
<p><a href="#page2">go page2</a></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>2 page</p>
<p><a href="#page1">go page1</a></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
</body>
</html> |
cs |
pageEvent.html 을 만들고 실습해 봅니다.
해당 이벤트가 어느시점에 발생하는지 알아야 페이지 이동 시 선 작업이나 후 작업을 자유롭게 할 수 있습니다.
외부 페이지를 불러 오는 경우도 마찬가지이며 앞 강좌에서 만든 externalPage.html을 활용하여 실습하는 방법도 추천해 봅니다.
'language > jquery mobile' 카테고리의 다른 글
| jquery mobile 강좌 11 [ 목록 뷰 / listview / form 태그 적용 / 입력 폼 만들기 ] (5) (0) | 2016.03.16 |
|---|---|
| jquery mobile 강좌 10 [ 목록 뷰 / listview / 아코디언 / collapsibleset / accordion ] (4) (0) | 2016.03.16 |
| jquery mobile 강좌 9 [ 목록 뷰 / listview / 말풍선 count bubbles / 아이콘 icon / 썸네일 / thumbnails] (3) (0) | 2016.03.16 |
| jquery mobile 강좌 8 [ 목록 뷰 / listview / 버튼 나누기 / 검색 만들기 ] (2) (0) | 2016.03.15 |
| jquery mobile 강좌 7 [ 목록 뷰 / listview 목록 만들기 ] (1) (0) | 2016.03.15 |
| jquery mobile 강좌 6 [ 페이지 전환 애니메이션 / 화면 전환 / 애니메이션 /changePage / data-transition / data-direction ] (0) | 2016.03.15 |
| jquery mobile 강좌 5 [ 페이지 이동 / changePage ] (15) | 2016.03.11 |
| jquery mobile 강좌 4 [ 대화상자, 다이얼로그 팝업 ] (0) | 2016.03.11 |
| jquery mobile 강좌 2 [ 페이지 이동 및 뒤로가기 ] (8) | 2016.03.10 |
| jquery mobile 강좌 1 [ jquery mobile 기본 설정 및 화면 만들기 ] (4) | 2016.03.10 |