다이나믹하게 리스트 생성하기
jQuery Mobile에 의해서 display 되는 리스트 만들기는 jQuery 에 그 기본을 둡니다. jQuery Mobile 은 그것을 사용하기 위해 listview () method를 implement합니다. 이 리스트들은 listview standard component와 연계가 있습니다.
리스트는 HTML 코드 안에서 생성할 수 있습니다. jQuery Mobile 은 이 리스트 아이템들을 좀 더 예쁘게 보이도록 새로운 CSS 클래스를 적용해서 HTML을 convert 할 수 있습니다.
그리고 새로운 리스트를 jQuery 의 메소드를 사용해서 dynamic 하게 생성하는 것도 가능합니다.
List without images
아래 예제에서는 페이지에 HTML 코드로 list 를 만들고 두번쨰로는 JavaScript code로 dynamic 하게 list를 생성했습니다. 마지막으로 이 두 리스트의 view를 일관되게 표현했습니다.
Dynamic creation of a list
<!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>
<ol id=list1 data-role=listview data-inset=true>
<li data-role=list-divider>Static list</li>
<li data-icon=delete>
<a href=#>Element 1.1</a>
</li>
<li data-icon=delete>
<a href=#>Element 1.2</a>
</li>
<li data-icon=delete>
<a href=#>Element 1.3</a>
</li>
</ol>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "<ol id=list2 data-role=listview data-inset=true>";
html += "<li data-role=list-divider>Dynamic list</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.1</a>";
html += "</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.2</a>";
html += "</li>";
html += "<li data-icon=delete>";
html += "<a href=#>Element 2.3</a>";
html += "</li>";
html += "</ol>";
$("#home div:jqmData(role=content)").append (html);
</script>
첫번째 리스트는 전통적인 방법으로 HTML을 사용해서 생성했고 (static list) 두번째는 JavaScript 로 자동으로 생성해서 append
(html) instruction을 사용해서 DOM tree에 insert 했습니다(dynamic list).
tistory417_01.html
List with images
이번에는 위와 같은 예제인데요 다른 점은 리스트 아이템 안에 이미지가 들어가는 겁니다. static list 는 두개의 리스트 아이템이 있고 dynamic list에는 한개의 아이템이 있습니다.
Dynamic creation of a list with images
<!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>
<ul id=list1 data-role=listview data-inset=true>
<li data-role=list-divider>Static list</li>
<li>
<img src=images/html.jpg />
<h1> HTML & CSS</h1>
<p> Eric Sarrion</p>
</li>
<li>
<img src="images/j2ee.jpg" />
<h3>J2EE</h3>
<p> Eric Sarrion</p>
</li>
</ul>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "<ul id=list2 data-role=listview data-inset=true>";
html += "<li data-role=list-divider>Dynamic list</li>";
html += "<li>";
html += "<img src=images/jquery.jpg />";
html += "<h3>JQuery & jQuery UI</h3>";
html += "<p> Eric Sarrion</p>";
html += "</li>";
html += "</ul>";
$("#home div:jqmData(role=content)").append (html);
</script>
tistory417_02.zip