Customize windows
window 는 대개 3개의 zone 으로 구성됩니다. : header, content
and footer. 우리는 이 윈도우의 content part 를 어떻게 customize 하는지를 공부합니다. 다른 부분에 대한 customization 은 toolbars chapter 에서 다룰겁니다.
Window 의 content를 어떻게 customize 하는지를 보기 위해 아래 HTML code 를 살펴 보겠습니다.
A minimal window
<!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 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> Paragraph 1 </p>
<p> Paragraph 2 </p>
<p> Paragraph 3 </p>
<p> Paragraph 4 </p>
<p> Paragraph 5 </p>
<p> Paragraph 6 </p>
<p> Paragraph 7 </p>
<p> Paragraph 8 </p>
<p> Paragraph 9 </p>
</div>
</div>
</body>
</html>
tistory414_01.html한개의 header toolbar와 9개의 paragraph 가 있는 content 를 add 했습니다. 이 window 는 그냥 평범한 모습으로 display 될 겁니다.
window를 어떻게 customize 하는지 이해하기 위해 우리가 작성한 이 코드가 jQuery Mobile 에 의해 어떤 HTML 코드로 generate 되는지를 살펴보세요. 아래는 Firefox 브라우저의 Firebug 로 본 모습입니다.
window 의 content 부분에 해당하는 <div>
element 를 보시면 ui-content
CSS class 가 있는 걸 보실 수 있을 겁니다. (원본 소스에는 없었던 거죠) 만약 이 스타일을 우리의 HTML page에 정의해 넣는 다면 이 window contents 는 약간 다르게 보일겁니다.
Changing the style associated with the contents of the window
<!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 src=jquery.mobile/jquery.mobile.js></script>
<style type=text/css>
.ui-content {
font-style : italic;
font-size : 20px;
background-color : grey;
color : red;
}
</style>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Paragraph 1 </p>
<p> Paragraph 2 </p>
<p> Paragraph 3 </p>
<p> Paragraph 4 </p>
<p> Paragraph 5 </p>
<p> Paragraph 6 </p>
<p> Paragraph 7 </p>
<p> Paragraph 8 </p>
<p> Paragraph 9 </p>
</div>
</div>
</body>
</html>
이렇게 하면 content 부분을 여러분이 원하시는 대로 customize 하실 수 있습니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 리스트에 아이템 insert 하기 (0) | 2012.10.24 |
|---|---|
| Ajax 로 리스트 Retrieve 하기 (0) | 2012.10.23 |
| HTML element 를 jQuery Mobile list 로 바꾸기 (0) | 2012.10.23 |
| 다이나믹하게 리스트 생성하기 (0) | 2012.10.22 |
| window를 생성하는 예제들... (0) | 2012.10.21 |
| window (화면) 들의 event 들 관리하기 (0) | 2012.10.20 |
| 다른 메소드들과 프로퍼티들 보기 (0) | 2012.10.19 |
| Dialog windows 사용하기 (0) | 2012.10.17 |
| 윈도우 생성 과정 이해하기 (0) | 2012.10.16 |
| $.mobile.loadPage (url, options) method 사용하기 (0) | 2012.10.15 |