오늘은 단순히 JQM을만이 아니라 Javascript로 동적으로 프로그래밍 하는 부분을 간단히 공부해 보겠습니다.
우선 기본 <html> 소스부터 봅니다.
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<style type=text/css>
p {
font-style : italic;
margin-bottom : 0px;
text-align : center;
text-transform : uppercase;
}
</style>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
</div>
</div>
</body>
</html>
보면 헤더에 Home 이라는 글자가 있고 content는 있는데 그 안에는 아무런 내용이 없죠.
그리고 body 안에 보면 <p> 태그는 하나도 없는데 위에 <p> 태그에 적용되는 스타일링이 정의 돼 있습니다.
딱 보면 content 부분에 뭘 넣을 건데 거기에 <p> 태그가 들어가나 보네요.
하여간 위의 소스로 html을 만들어서 실행시키면 아래 화면을 보실 수 있습니다.
그럼 이제 자바 스크립트 부분을 볼까요?
이 JavaScript 는 </html> 다음에 붙여 넣습니다.
<script>
var $content = $("[data-role=content]");
var obj = $.mobile;
$content.append ("<p> Properties </p>");
for (var prop in obj)
if (!$.isFunction (obj[prop])) $content.append (
"<b>" + prop + "</b> = " + obj[prop] + "<br />");
$content.append ("<p> Methods </p>");
for (var prop in obj)
if ($.isFunction (obj[prop])) $content.append (
"<b>" + prop + "</b> () " + "<br />");
</script>
불까요? 변수 $content에 data-role=content를 넣었습니다.
그리고 obj라는 변수에는 $.mobile; JQM 함수를 넣었습니다.
그 다음을 보면 $content 에 문자를 append 하죠?
즉 data-role=content에 문자를 append 하는 겁니다.
그리고 $.mobile 에 있는 prop 들을 화면에 출력하는 for 문이 있습니다.
그 다음에는 $content에 Methods 라는 문자를 추가 합니다.
그리고 $.mobile에 있는 메소드들을 출력합니다.
그러면 아래와 같은 화면을 보실 수 있을 겁니다.
화면에 보시는 것들이 바로 $.mobile object에 세팅돼 있는 프로퍼티들 입니다.
저 프로퍼티들과 메소드들을 다 알 필요는 없지만 그래도 자주 쓰이는 것들은 눈에 익어야 될 텐데요.
꾸준히 그리고 많이 Practice를 하는 방법밖에는 없겠죠?
convention01.html'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 나만의 jQuery Mobile 컴포넌트 만들기 (0) | 2012.10.02 |
|---|---|
| Virtual Events 알아보기 (0) | 2012.09.30 |
| 네임 스페이스 사용하기 (0) | 2012.09.30 |
| Configuration Options (0) | 2012.09.29 |
| mobileinit 이벤트가 triggering 되는 시기 알아보기 (0) | 2012.09.29 |
| 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 |
| JQuery Mobile - inline buttons (0) | 2012.08.13 |