jQuery Mobile initialisation



자바스크립트로 jQuery Mobile file을 include 하면 in it 이 실행 됩니다.  그리고 $.mobile object 가 생성되죠.$.mobile object 는 이전 글에서 보셨듯이 method들과 프로퍼티들을 가지고 있습니다. 그리고 다양한 객체들에 디폴트 값들이 할당되게 되죠. 예를 들어

  • The text on the Back button.

  • The CSS theme associated with this button ("a" to "e").

  • The icon displayed by default in the selection lists (ie set to arrow-d by default).

  • Etc..


이 옵션들에 대한 디폴트 값들은 바꿀 수 있습니다. 그런데 아무때나 바꿀 수 있는 것은 아니고 처음 시작될 때 특정 기간 안에 바꾸도록 해야 합니다. 그 기간을 놓쳐 버리면 그 디폴트 값들을 바꿀 수 있는 시간을 놓쳐 버리게 됩니다. 그 한정된 기간은 document object에 의해 mobileinit 이벤트가 reveived 될 때 시작합니다. 그러니까 우리는 이 이벤트의 treatment 내에 jQuery Mobile configuration option들의 디폴트 값을 바꿀 수가 있ㅅ브니다. 이 configuration option들에 대해서는 다음 글에서 다루겠습니다.

Let's see how to handle the mobileinit event:

그럼 어떻게 이 mobileinit 이벤트를 다루는지 볼까요?


Processing mobileinit event


<!DOCTYPE html> 

<html> 

<head> 

  <meta name=viewport content="user-scalable=no,width=device-width" />

  <link rel=stylesheet href=jquery.mobile/jquery.mobile.css />

  <script src=jquery.js></script>

  <script>

    $(document).bind ("mobileinit", function ()

    {

      alert ("mobileinit");

    });

  </script>  

  <script src=jquery.mobile/jquery.mobile.js></script>

</head> 


<body> 


<div data-role=page id=home>

  <div data-role=header>

    <h1>Home</h1>

  </div>


  <div data-role=content>

    <p> Window content </p>

  </div>

</div>


</body>

</html>


<script>


$(document).ready (function ()

{

  alert ("DOM ready");

});


</script>



mobileinit 이벤트를 핸들링하는 코드 블럭의 위치를 잘 보세요. 이 코드는 반드시 jQuery Mobile Javascript 소스 (jquery.mobile-1.1.1.min.js, jquery.mobile.js ...) 를 넣기 전에 있어야 합니다. 만약 이 소스 다음에 mobileinit을 넣으면 jQuery Mobile은 mobileinit을 trigger는 하지만 그 코드를 위치한 그곳에서 그 trigger 가 일어나지 않습니다.

즉 위 코드에서 보면 alert 가 일어나지 않게 됩니다.



 convention02.html



위 파일을 실행시켜 보면 mobileinit alert 가 먼저 뜨고 그 다음에 DOM ready alert 가 뜰 겁니다. 즉 mobileinit 이벤트가 먼저 실행 되고 나서 DOM 이 준비 된다는 얘기죠.




출처 - http://coronasdk.tistory.com/379



Posted by linuxism
,