블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함



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 이 준비 된다는 얘기죠.