Turning a HTML element into a jQuery Mobile list
이번에 할 작업은 일반적인 HTML에서의 리스트 표시 방법인 <ul> or <ol>를 jQuery Mobile 식으로 display 하도록 바꾸는 작업입니다. <ul> or <ol> element 가 data-role="listview" attribute 를 사용해서 리스트를 표시할 수 있는 것은 이미 알고 계시죠? 우리는 이 attribute를 어떻게 <ul> or <ol> element 에 이 attribute를 적용하는지에 대해 알아 볼겁니다.
아래 예제를 보실텐데요 일단 고전적인 attribute들인 data-role, data-icon, etc 을 모두 제거한 코드를 먼저 보시겠습니다.
A HTML list with no jQuery Mobile conventions
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<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>
<ol id=list1>
<li>Element 1.1</li>
<li>Element 1.2</li>
<li>Element 1.3</li>
</ol>
</div>
</div>
</body>
</html>
<script>
</script>
이 리스트는 전형적인 jQuery Mobile window를 포함하고 있습니다. 그런데 <ol>
element 가 data-role="listview"
attribute를 가지고 있지 않습니다. 이 리스트는 아주 기본적인 형식만 갖췄습니다.
tistory418_01.html이제 자바스크립트로 jQuery Mobile convention을 따라서 display 하도록 무너가 작업을 해야될 것 같군요. 이를 위해서 listview
jQuery Mobile component 에 있는 listview
() method를 사용해서 HTML 리스트를 jQuery Mobile 리스트로 표시할 겁니다.
Add this statement in our JavaScript code:
Call to the listview () method on the list
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<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>
<ol id=list1>
<li>Element 1.1</li>
<li>Element 1.2</li>
<li>Element 1.3</li>
</ol>
</div>
</div>
</body>
</html>
<script>
$("#list1").listview ();
</script>
그런데 기대했던 모습은 아니네요. 우리는 이 window 가 생성될 때 그냥 거기서 jQuery Mobile component (list) 를 display 하라고 시켰습니다. 이러지 말고 이 window 가 그 transformation을 수행하기 위한 과정에서 create 될 때 까지 좀 더 기다려 줘야 할 것 같습니다.
그 윈도우의 pagecreate event 에서 listview
() instruction을 집어 넣어 보겠습니다. 그러면 이 윈도우가 create 되는 것을 끝마칠 때까지 기다릴 겁니다.
Call to the listview () method in the treatment of the pagecreate event
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<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>
<ol id=list1>
<li>Element 1.1</li>
<li>Element 1.2</li>
<li>Element 1.3</li>
</ol>
</div>
</div>
</body>
</html>
<script>
$("#home").bind ("pagecreate", function ()
{
$("#list1").listview ();
});
</script>
이제 기대했던 대로 나왔네요.....
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 리스트 Customization 하기 (0) | 2012.10.26 |
|---|---|
| 리스트에서 이벤트 관리하기 (0) | 2012.10.25 |
| 리스트에서 아이템 지우기 (0) | 2012.10.25 |
| 리스트에 아이템 insert 하기 (0) | 2012.10.24 |
| Ajax 로 리스트 Retrieve 하기 (0) | 2012.10.23 |
| 다이나믹하게 리스트 생성하기 (0) | 2012.10.22 |
| window를 생성하는 예제들... (0) | 2012.10.21 |
| content 부분 customize 하기 (0) | 2012.10.21 |
| window (화면) 들의 event 들 관리하기 (0) | 2012.10.20 |
| 다른 메소드들과 프로퍼티들 보기 (0) | 2012.10.19 |