5. Jquery Mobile 기초 – 로딩 관련 이벤트처리

(1) mobileinit

JqueryMobile JS 가 로딩될때 로딩되는 이벤트로 보통 화면 전환 방식, 로딩 방식 등 기본 세팅과

관련된 이벤트를 처리한다. 자세한 이벤트는 아래의 사이트를 참조한다.

– 참조 : http://jquerymobile.com/demos/1.2.0/#/demos/1.2.0/docs/api/globalconfig.html

[예제] 아래는 Mobileitit 이벤트에서 로딩Bar 를 Visible 처리 하고, 로딩 메세지를 정의, 화면 전환 방식을 정의하는 코드이다.

$(document).bind(“mobileinit”,function(){
$.mobile.loader.prototype.options.textVisible = “true”;
$.mobile.loader.prototype.options.text = “로딩중..”;
$.mobile.defaultPageTransition = “slide”;
});
</script>
<script src=”http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js”></script>

(2) pagehide, pageshow, pagebeforehide, pagebeforeshow

페이지 이동전에 발생하는 이벤트로 주로 이동전 화면에 포함되어 있는 데이터를 가지고 와서 어떤 처리를 하고자 하는

경우 사용한다.

[예제] 위에 설명한 이벤트는 pagebeforehide -> pagehide -> pagebeforeshow -> pageshow 의 순서로 실행된다.

$(document).bind(“pagebeforehide”,function(){
$(document).find(“a”).each(function(){
console.show(“pagebeforehide” + $(this).attr(“href”));});
});
$(document).bind(“pagehide”,function(){
$(document).find(“a”).each(function(){
onsole.show(“pagehide : ” + $(this).attr(“href”)); });
});

$(document).bind(“pagebeforeshow”,function(){
$(document).find(“a”).each(function(){
onsole.show(“pagebeforeshow : ” + $(this).attr(“href”)); });
});
$(document).bind(“pageshow”,function(){
$(document).find(“a”).each(function(){
onsole.show(“pageshow : ” + $(this).attr(“href”)); });
});

[예제] pagehide 페이지가 숨겨지면서는 event 와 ui 를 파라메터로 받을수 있다.

사라지는 시점에서는 다음 페이지의 정보를 얻을 수 있다.

– 아래의 예제는 home에서 pageshow 이벤트를 정의한 모습을 볼 수 있다.

home 에서의 pageshow라 함은 home 을 부르기 전의 페이지에 대한 정보를 얻을 수 있음을 말한다.

아래의 코드는 2번과 3번 페이지중 어디에서 home 으로 이동했는지를 구분하여 info div 에 추가하는

예제이다.

– prevpage , nextpage 객체는 data-role=”page” 객체를 가지고 있음으로 그 하위 객체에 대한

접근또한 얼마든지 가능하다.

$(document).bind(“mobileinit”, function() {
$(“#homePage”).live(“pageshow”, function(event, ui) {
if(ui.prevPage.attr(“id”) == “secondPage”) {

$(ui.prevPage).find(“div[data-role=content]”).each(function(){
$(“#info”).append(“Second Page 의 Content 내용은 ” + $(this).attr(“data-role”) + “<br/>”);
});
$(“#info”).append(“Second Page에서 이동되었습니다. <br/>”);
} else if(ui.prevPage.attr(“id”) == “thirdPage”) {
$(“#info”).append(“Third Page에서 이동되었습니다. <br/>”);
} }); });

<div id=”homePage” data-role=”page”>
<div data-role=”header”>
<h1>홈 페이지</h1>
</div>
<div data-role=”content”>
<a href=”06_page_prevpage_second.html” data-role=”button”>Second Page</a>
<a href=”06_page_prevpage_third.html” data-role=”button”>Third Page</a>
<div id=”info”></div>
</div>
</div>

(3) 기타 로딩 관련 Event

– 페이지 로드 이벤트 : pagebeforeload, pafeload, pageloadfailed

– 페이지 초기화 이벤트 : pagebeforecreate, pagecreate, pageinit

– 페이지 제거 이벤트 : pageremove

(4) Event Attach : bind, live

– bind : 현재 존재하는 객체에 대해서 이벤트를 등록하고자 할때 사용한다.

– live : 현재 존재하지 않더라도 나중에 객체가 생길것을 예상하고 이벤트를 등록한다.

주로 Jquery-mobile 에서 다음 링크 페이지에 대한 이벤트를 홈에서 등록하고자 할때 사용한다.