자바스크립트로 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 이 준비 된다는 얘기죠.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 컴포넌트 생성 여부 체크하는 방법 (0) | 2012.10.03 |
|---|---|
| 나만의 jQuery Mobile 컴포넌트 만들기 (0) | 2012.10.02 |
| Virtual Events 알아보기 (0) | 2012.09.30 |
| 네임 스페이스 사용하기 (0) | 2012.09.30 |
| Configuration Options (0) | 2012.09.29 |
| Property 들 출력하기 (JQM + Javascript Programming) (0) | 2012.09.27 |
| JQuery Mobile - Layout Grid (Columns) (0) | 2012.08.22 |
| JQuery Mobile - Basic HTML Styles (0) | 2012.08.14 |
| JQuery Mobile - Theming buttons (0) | 2012.08.14 |
| JQuery Mobile -Grouped buttons (0) | 2012.08.14 |