selection list를 Ajax 를 통해 받아서 이것을 window에 insert 하겠습니다.
Retrieve a selection list by Ajax
<!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>
<span> Choose an apartment type: </span>
</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);
$("select").selectmenu ();
}
});
</script>
<select>
element. 에 있는 selectmenu
() method의 사용법을 잘 보세요. 이 메소드가 오리지널 HTML code를 jQuery Mobile 스럽게 display 하는 HTML 로 변환시키는 일을 합니다. 그리고 버튼을 클릭하면 selection list 가 열릴 겁니다.
action.php file
<?
$html = "";
$html .= "<select data-native-menu=false data-icon=plus data-iconpos=left>";
$html .= "<option value=1> 1 bedroom </option>";
$html .= "<option value=2> 2 bedrooms </option>";
$html .= "<option value=3> 3 bedrooms </option>";
$html .= "<option value=4> 4 bedrooms </option>";
$html .= "<option value=5> 5 bedrooms </option>";
$html .= "</select>";
echo utf8_encode ($html);
?>
selectmenu
() method를 call 하는 것을 빼면 jQuery Mobile 에 의한 변환은 일어나지 않을 겁니다. 그러면 classic style의 selection list 가 나타나겠죠.
action10.php
tistory463_01.html'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| selectiion list customize 하기 (0) | 2012.11.17 |
|---|---|
| selection list 에서 이벤트 관리하기 (0) | 2012.11.17 |
| selection list 추가하기와 지우기 (0) | 2012.11.15 |
| selection list 에서 select 된 아이템 값 할당하거나 가져오는 방법 (0) | 2012.11.15 |
| selection 리스트 열고 닫기 (0) | 2012.11.13 |
| HTML element를 jQuery Mobile selection list로 바꾸기 (0) | 2012.11.12 |
| 다이나믹하게 selection list 생성하기 (0) | 2012.11.11 |
| input field 관련 예제들 (0) | 2012.11.10 |
| Input field 를 customize 하기 (0) | 2012.11.10 |
| input field에서 이벤트 관리하기 (0) | 2012.11.09 |