jQueryMobile, mobileinit 이벤트로 $.mobile 초기화

Ajax 로 페이지 생성 및 전환이 이루어지다 보니,

이들이 상호작용 하는 순간에 데이타가 어떻게 변형되는지 알아보기 위해 관련 이벤트를 알아두자.

$(document).live('mobileinit',function(){ // jquery.js 와 jquerymobile.js 사이에 정의하기 때문에 live() 함수로 mobileinit 이벤트를 정의

  $.extend($.mobile,{                       // $.mobile 개체를 $.extend 로 확장하여 재정의

    ajaxEnabled:true,

    allowCrossDomainPages:false,

    autoInitializePage:true,

    defaultDialogTransition:'pop',

    defaultPageTransition:'fade', // 개인적으로는 slide 를 더 선호. fade 보다 리소스를 적게 사용

    loadingMessage:'loading',

    loadingMessageTextVisible:false, // false 이면 원형 이미지

    loadingMessageThem:'a', // false 이면 원형 이미지

    pageLoadErrorMessage:'Error Loading Page',

    pageLoadErrorMessageTheme:'e' 노란색

  });

});

$(document).live('mobileinit',function(){

  $(document).live('이벤트 이름',function(){ ... });          // 하나의 .jsp 안에 있는 전체 페이지에 적용

  $('#페이지 아이디').live('이벤트 이름',function(){ ... }); // 하나의 .jsp 안에 있는 특정 페이지에 적용

});

$(document).live('mobileinit',function(){                                // data.dataUrl 도메인 제외된 상대경로, data.url 도메인 포함된 상대경로

  $(document).live('pagebeforeload',function(e,data){ ... }); // 페이지 전환될 내용, 로드 전 호출. e 는 event 라는 것(이후 동일).

  $(document).live('pageload',function(e,data){ ... });           // 페이지 전환될 내용, 로드 성공시 호출

  $(document).live('pageloadfailed',function(e,data){ ... });  // 페이지 전환될 내용, 로드 실패시 호출

});

$(document).live('mobileinit',function(){

  $(document).live('pagebeforecreate',function(e){ ... }); // pageload 이후 새로 로드된 내용을, 페이지 생성 전

  $(document).live('pagecreate',function(e){ ... });           // pageload 이후 새로 로드된 내용을, 페이지 최초 생성 후

  $(document).live('pageinit',function(e){ ... });                // pageload 이후 새로 로드된 내용을, 초기화 완료

  $(document).live('pageremove',function(e){ ... });         // pageload 이후 새로 로드된 내용을, DOM 에서 삭제

});

$(document).live('mobileinit',function(){ // ui.prevPage 와 ui.nextPage 는 DOM 개체

  $(document).live('pagebeforeshow',function(e,ui){ ... }); // pagecreate 이후, 이후 페이지 보이기 전

  $(document).live('pageshow',function(e, ui){ ... });           // pagecreate 이후, 이후 페이지 보이기 후

  $(document).live('pagebeforehide',function(e, ui){ ... });  // pagecreate 이후, 이전 페이지 숨기기 전

  $(document).live('pagehide',function(e, ui){ ... });            // pagecreate 이후, 이전 페이지 숨기기 후

});

pageA 에서 pageB 를 호출하는 경우,

pageA 의 pagebeforehide -> pageB 의 pagebeforeshow -> pageA 의 pagehide -> pageB 의 pageshow 순으로 이벤트가 흐름.