Ajax에 의해 처리된 리스트를 만들겁니다. 이 리스트는 window content에 마지막 element 로서 추가 될 겁니다.
Retrieve a list by Ajax and insert into the window
<!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>
<p> Window content </p>
</div>
</div>
</body>
</html>
<script>
$.ajax (
{
url : "action.php",
complete : function (xhr, result)
{
if (result != "success") return;
var response = xhr.responseText;
$("#home div:jqmData(role=content)").append (response);
$("#list").listview ();
}
});
</script>
action.php file 에는 window 에 넣을 list를 return 하는 server program 이 있습니다.
action.php file
<?
$html = "";
$html .= "<ol id=list data-inset=true>";
$html .= "<li data-role=list-divider>List retrieved by Ajax</li>";
$html .= "<li data-icon=delete>";
$html .= "<a href=#>Element 1</a>";
$html .= "</li>";
$html .= "<li data-icon=delete>";
$html .= "<a href=#>Element 2</a>";
$html .= "</li>";
$html .= "<li data-icon=delete>";
$html .= "<a href=#>Element 3</a>";
$html .= "</li>";
$html .= "</ol>";
echo utf8_encode ($html);
?>
자바스크립트 코드 안에 있는 $("#list").listview
() statement를 보세요. 여기서 서버로부터 HTML 코드를 받아 이것을 jQuery Mobile 의 list 로 display 하는 겁니다. 이게 없으면 이 리스트는 jQuery Mobile 의 list를 보여주지 않고 그냥 단순히 HTML list 를 보여주게 됩니다.
이 예제의 결과는 아래 화면과 같을 겁니다.
action419.php
tistory419_01.htmlWindow에 list 를 생성하기 위해 create event 를 사용하실 수도 있습니다.
Create the list using listview ()
$("#list").listview ();
위 코드 부분 아래에 아래 코드를 추가하세요.
Create the list using the create event
$("#home").trigger ("create");
만약 create event를 사용하신다면 이 리스트는 서버로부터 반드시 data-role="listview"
attribute 를 retrieve 할 겁니다. 그렇지 않으면 jQuery Mobile은 이 HTML element를 jQuery Mobile 리스트로 전환해야 된다는 것을 알지 못합니다. listview
() method 를 사용하시면 이 attribute는 필요가 없게 되는 거죠. 이 메소드가 call 되면 jQuery Mobile list로 transform 해야 된 다는 것을 알려 주는 겁니다. (여기서는 #list1
element 임)
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 리스트 다루기 예제 (0) | 2012.10.29 |
|---|---|
| 리스트 Customization 하기 (0) | 2012.10.26 |
| 리스트에서 이벤트 관리하기 (0) | 2012.10.25 |
| 리스트에서 아이템 지우기 (0) | 2012.10.25 |
| 리스트에 아이템 insert 하기 (0) | 2012.10.24 |
| HTML element 를 jQuery Mobile list 로 바꾸기 (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 |